移动元素的jQuery动画()与addClass()
要移动元素，我可以使用jQuery、动画()或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;
}我知道动画()有一个限制，即属性只能是单个数值(除非您还导入jQuery UI)。因此，这个问题是关于移动框，这是一个数值。
使用哪种功能有关系吗？在表现上有差异吗？
回答 3
Stack Overflow用户
发布于 2017-10-02 05:34:31
这个问题非常广泛，你在你的案例中使用什么并不重要。您的动画非常简单，不会使用很多资源来执行。不过，我建议大多数时候使用CSS动画。原因如下：
性能
如果你使用CSS动画，CSS动画将会更清晰、更快、更流畅。它是在浏览器中构建的，不需要额外的计算，jQuery需要。您甚至可以看到最近的插件，如滑块使用CSS动画的原因。
控制
CSS动画有更好的控制，无需导入额外的库。放松是很容易操作的立方贝塞尔，你可以动画，开箱，像颜色，变换，等等.
三维动画
在CSS中动画3D属性是一件轻而易举的事情。使用CSS的性能也会更高。
响应式
如果您有不同的响应值，那么使用CSS可以更容易地管理一切。简单的媒体查询可以代替笨重、混乱的Javascript条件。此外，如果您的动画在某些屏幕上应用，您将不必声明一个函数来重置HTML标记上的样式，因为CSS动画不会将样式放在style=""中；它很容易被夸大。
我在使用jQuery动画时看到的唯一优点是它更容易设置。关键字'toggle'也很不错，您需要在CSS中模仿它。
Stack Overflow用户
发布于 2017-10-02 07:08:49
如果性能是一个问题，并且您的动画是通过添加类触发的，您可以使用香草Javascript这样做，这将优于上面列出的两个JQuery方法：
document.getElementById('box').classList.addClass('move-box');classList可在包括IE10+在内的所有现代浏览器中使用。
Stack Overflow用户
发布于 2017-10-02 05:25:00
你使用动画时，你想要“动画”和元素，因为它强调。它允许您以所需的速度完成动画，但它还将内联样式属性添加到HTML标记中，如果动画不是必需的，则这不是首选。添加类更聪明，更少乱七八糟，您也可以删除类而不留下任何标记。但是动画还有一个比添加类更有用的未来，也就是说，您可以在动画的末尾添加另一个函数。每当动画停止时，您可以触发另一个函数，但是如果您不需要创建动画，那么上面提到的功能是无用的。
https://stackoverflow.com/questions/46525925
复制
腾讯云开发者
