制作多个div动画的最佳方法

Question

我正在寻找最好的方式来动画几个div在屏幕上。我尝试过jQuery，但在我的屏幕上有5个以上的元素后，它开始变得越来越快。Raphael.js给了我同样的问题。那么，在屏幕上同时显示5-6个div的最好方法是什么呢？它们只是在屏幕上水平移动。

Css3的translate2d会对此有好处吗？我记得在某处读到过，您可以通过使用translate3d来大幅优化性能。这适用于我的情况吗？

Answer 1

如果您的目标浏览器支持CSS3，则可以使用translate2d获得更流畅的动画。如果您需要将所有项目一起动画化(即，每个项目的动画规则都是相同的)，则只需创建一个类

.animTarget{animation:translate3d(100, 0, 0)}

然后在你的javascript代码中，说：

$("animation-target-selector").addClass('animTarget')

我发现像这样的动画要比做像这样的事情容易得多：

$("animation-target-selector").css('animation', 'translate3d(100, 100, 0)');

因为它将它添加到每个dom元素的style属性中。