Question

我正在尝试为范围滑块设置动画，该范围滑块在每次移动时以大约2秒的持续时间滑动到最大值并降至最小值，并以1为增量。我不希望它是瞬时的;我希望用户看到滑块来回移动。这是我目前的代码：

public class A
{
public string Name { get; set; }    
public Dictionary<int, List<int>> Years { get; set; }
}

问题在于，当浏览器加载并且按钮被激活时，滑块几乎立即处于最大值，然后在适当的持续时间内减小。我还需要幻灯片以1为增量进行更改，以便用户可以准确获得位置。但是要做到这一点，我需要一个循环，这基本上导致我的浏览器（Chrome）冻结。

任何替代方法或其他任何方法都会很棒！

我希望这是有道理的，如果需要进一步澄清，请告诉我。

提前致谢！

编辑：JSFiddle：http://jsfiddle.net/5j2f0L2t/1/

Answer 1

我建议你只使用css3（和javascript / jQuery）。您可以使用css3 animations设置动画，并在需要时添加其余功能。

我创建了示例here。

@keyframes slide
{
  0% { left: 10px; }
  50% { left: 160px; }
  100% { left: 10px; }
}

#slider
{
   animation-name: slide;
   animation-duration: 2s;
   animation-iteration-count: 1;
   animation-delay: 1s; 
}

前后动画范围滑块（循环）

1 个答案: