javascript - 使用纯 JS 动画更改 CSS 值

Question

好的，我正在更改 CSS 'left' 属性的值，如下所示：

s_list.style.left = left - amount + 'px';

s_list 是一个变量，它是一个 UL 元素。此行在单击按钮时执行。但效果是立竿见影的，可以快速看到任何形式的动画。我可以用纯 JS 做些什么来减慢速度或为更改添加可配置的延迟？

要查看我的工作演示：

http://jsfiddle.net/benhowdle89/RCkPq/

并可能提出解决方案！

Answer 1

对于基本动画，您可以使用setTimeout或setInterval。但是，在现代浏览器中，它们已经过时了。一种更有效的动画方法是使用requestAnimationFrame.

function animate(things){
    //Do stuff here.
    requestAnimationFrame(animate);
}

你可能会问，"How is this different?"好吧，requestAnimationFrame只有当用户可以真正看到元素时才会重绘屏幕。如果用户在另一个选项卡上，或者向下滚动页面，它不会重绘它。它可以保存计算机中的内存。

不幸的是，直到现在每个浏览器仍然需要一个前缀。这是一个修复：

if ( !window.requestAnimationFrame ) {
    window.requestAnimationFrame = ( function() {
        return window.webkitRequestAnimationFrame ||  //webkit
        window.mozRequestAnimationFrame ||            //mozilla
        window.oRequestAnimationFrame ||              //opera
        window.msRequestAnimationFrame ||             //IE!
        function(callback, element) {
            window.setTimeout( callback, 1000 / 60 ); //not supported
        };
    } )();
}

更新

现场演示：

1. http://jsfiddle.net/DerekL/4wLsC/
2. http://jsfiddle.net/DerekL/4wLsC/4/- 循环浏览图像_{^{（仍然没有 jQuery！）}}

Answer 2

您正在做的是立即将值更改为单击时的最终位置。

为了制作动画，您需要迭代更长的时间，将左值更改为每帧数量的一小部分。

尝试使用setInterval或链setTimeout，其中每一步将元素移动几个像素，以实现动画。

例子：

function move(){
   s_list.style.left = s_list.style.left - amount/10 + 'px';
   if (s_list.style.left.slice(0, -2) > desired_offset){
      setTimeout(move,10);
   }
}

这会将元素移动数量/10 像素，并重复该操作，直到您到达所需的位置。金额/10 可以更改为您想要的任何速率/速度。

编辑：添加 .slice 用于字符串/数字比较（信用：Wex）

双重编辑：在下面的评论中听 Wex。

Answer 3

您需要使用该setInterval函数定期运行您的代码。

或者只是使用 jQuery。