动画多个div的最佳方式

Question

我正在寻找在屏幕上动画几个div的最佳方法。我试过jQuery，但是在我有了＆gt;之后它开始变得越来越滑屏幕上有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属性中。