使用纯JS实现CSS值的动态变化

Question

使用纯JS实现CSS值的动态变化

3

好的，我正在更改CSS的“left”属性的值，像这样：

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

s_list是一个UL元素的变量。此行代码在点击按钮时执行。但效果是瞬间的，太快了，无法看到任何动画效果。是否有什么方法可以用纯JS来减慢速度或添加可配置的延迟以改变这种情况？

要查看我的演示，请访问：

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

并可能建议一种解决方案！

- benhowdle89

如果您希望它随着时间而发生，请使用setTimeout并逐步移动它。 - kinakuta

1

@kinakuta - 或者更高效的使用requestAnimationFrame。 ;) - Derek 朕會功夫

1

@Derek 看起来很有趣，不过似乎还太新而不够实用。 - kinakuta

1

我知道这不是你问题的答案（实际上是一条评论 ;) ），但如果可以使用CSS过渡，那会更容易。当然，这取决于您需要支持的浏览器。在这里看看：https://developer.mozilla.org/en/CSS/CSS_transitions 还有支持的浏览器。 - ZER0

@ZER0 - 可能在10年后，微软的Internet Explorer 42才会支持CSS3过渡效果。 :/ - Derek 朕會功夫

@Derek IE10似乎支持它们。 :) 正如我所说，这取决于需要支持的浏览器（例如，如果您在内部网络环境中或正在开发某些浏览器扩展等）。 - ZER0

3个回答

1

你正在做的是在点击时立即将值更改为其最终位置。

为了实现动画效果，需要在较长时间内迭代，每帧通过一小部分的量来更改左侧值。

尝试使用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);
   }
}

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

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

双重编辑：请听下面评论中的 Wex 的建议。

- Rodik

你可能需要进行一些类似于 String.slice() 的操作来进行字符串和数字的比较。 - Wex

啊，是的，注重细节不是我的强项。 - Rodik

你还可以通过将s_list.style.left = s_list.style.left - amount/10的中间值存储在临时变量中来改进此解决方案，如果它大于所需的偏移量，则将当前值设置为临时值；否则将当前值设置为所需的偏移量（这样就不会有溢出）。 - Wex

你希望看到的desired_offset是什么？ - benhowdle89

这取决于你在做什么？根据你的小提琴，你想让狗的图片变成猫的图片。似乎 left = -540 是你需要实现这个目标的。 - Rodik

0

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

或者只需使用jQuery。

- SLaks

纯JS似乎意味着没有外部库，如jQuery。 - Rodik

2

这就是因为我没有仔细阅读问题而犯下的错误。我会把链接留给其他人。 - SLaks

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Derek 朕會功夫 · Accepted Answer

对于基本动画，可以使用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
        };
    } )();
}

已更新

演示：

http://jsfiddle.net/DerekL/4wLsC/
http://jsfiddle.net/DerekL/4wLsC/4/ - 循环播放图片 _{^{(仍未使用 jQuery!)}}