jQuery animate（）vs addClass（）移动元素

Question

要移动元素，我可以使用jQuery animate()或addClass()：

// for simplicity I omitted a lot of boiler code..

$("#box").animate({left: 100},{duration: 250});

// or addClass() with a CSS class for the box and moving: 

$("#box").addClass("move-box");
#box {
    transition: all 250ms linear;
}
.move-box { 
    left: 100; 
}

我知道animate（）有一个限制，即属性只能是单个数值（除非你也导入jQuery UI）。所以这个问题是关于移动框，这是一个数值。

使用哪个功能是否重要？性能有差异吗？

Answer 1

如果关注性能并且通过添加类来触发动画，则可以使用vanilla Javascript来执行此操作，这将优于上面列出的两种JQuery方法：

document.getElementById('box').classList.addClass('move-box');

classList适用于所有现代浏览器，包括IE10 +。

Answer 2

你想要的时候使用动画＆＃34; Animate＆＃34;和强调的元素。它允许您以所需的速度执行动画，但它还将内联样式属性添加到HTML标记中，如果动画不是必须的，则不是首选的。添加类更聪明，更少混乱，也可以删除没有留下标记的类。但是animate有另一个比添加类更有用的未来，也就是说，你可以在动画的最后添加另一个函数。每当动画停止时，你可以触发另一个函数，但如果你不需要创建动画，我上面提到没用。

Answer 3

这个问题非常广泛，在您的案例中使用的内容并不重要。您的动画非常简单，不会使用很多资源来执行。我建议大多数时候使用CSS动画。原因如下：

性能

如果使用CSS动画，CSS动画将更清晰，更快速，更流畅。它是在浏览器中构建的，不需要jQuery的额外计算。出于这些原因，您甚至可以使用CSS动画查看最近的插件，例如滑块。

控制

CSS动画具有更好的控件，无需导入其他库。使用Cubic Bezier可轻松操作缓动，您可以动画，开箱即用，颜色，变换等等......

3D动画

在CSS中动画制作3D属性非常简单。使用CSS，性能也会更高。

响应

如果您具有不同的响应值，那么使用CSS可以更轻松地管理所有内容。简单的媒体查询可以解决笨重，混乱的Javascript问题。此外，如果您的动画适用于某些屏幕尺寸，则您不必声明一个函数来重置HTML标记上的样式，因为CSS动画不会将样式放在style=""内;它很容易被覆盖。

我在使用jQuery动画时看到的唯一优势是它更容易设置。关键字'toggle'也很不错，你需要在CSS中模仿它。