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);
}

您可能会问，“这有什么不同？” 那么，requestAnimationFrame 只会在用户实际看到元素时才重绘屏幕。如果用户在另一个选项卡上，或者向下滚动页面，它不会重绘它。它可以在计算机中保存内存。

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

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!)}}