哪个更好:Jquery.animate(）或带有setTimeOut的css转换

Which is better: Jquery.animate() or css transitions with setTimeOut

本文关键字：setTimeOut 转换 css 更好 Jquery animate      更新时间：2023-09-26

可能重复：
使用jQuery fadeIn还是CSS3动画更好
什么更快？CSS3转换还是jQuery动画？

我正在努力做一个动画和速度是至关重要的。我试过两种方法，都有效，但我想知道哪一种更有效。

方法1：使用Jquery.animate((我的代码看起来像：

$("div").animate({opacity: "show"}, 100, "linear", function() {
    console.log("Animation Complete");
});

方法2：使用带有setTimeOut的Css转换：这就是代码的样子：

$("div").addClass("hidden") //On Page load

然后设置淡入动画：

setTimeout(function () {
    $("div").removeClass('hidden');
}, 100);

Hidden具有以下样式属性：

.hidden { opacity: 0 !important; }

这两种方法都很好，但我想知道哪一种更有效/更好。

除非JavaScript动画为您提供了转换所没有的东西，否则请使用转换。

转换是在浏览器级别实现的，在某些情况下是硬件加速的，因此它们通常应该尽可能快。

此外，代码要简单得多。

转换的性能要好得多，因为它们是在浏览器中本地实现的，并且经常使用硬件加速。请在RichBradshaw的博客上查看这个jQuery动画与CSS转换的性能比较演示。默认情况下使用过渡。只有在必要时才使用jQuery作为旧浏览器的后备方案。

本文对CSS转换和性能(包括硬件加速(进行了很好的讨论。

动画效果更好。setTimeout()会在一段时间后立即删除css类，但animate会逐渐将其淡入/淡出。

如果淡出时间超过100ms，使用jquery动画将对您有所帮助。。

相关文章：