哪个更好：使用setTimeOut进行Jquery.animate（）或css转换

Question

  

可能重复：
  Is it better to use jQuery fadeIn or CSS3 animations?
  what’s faster? CSS3 transitions or jQuery animations?

我正在尝试制作动画，速度至关重要。我尝试了两种方法，但是我想知道哪种方法更有效。

方法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 { opacity: 0 !important; }

两者都运作良好，但我想知道哪一个更有效/更好。

Answer 1

转换过渡，除非JavaScript动画为您提供过渡不具备的内容。

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

此外，代码更简单。

Answer 2

转换执行得更好，因为它们是在浏览器中本机实现的，并且经常使用硬件加速。请参阅this jQuery animate vs CSS transitions performance comparison demo博客上的Rich Bradshaw。默认情况下使用过渡。如有必要，仅使用jQuery作为旧浏览器的后备。

This article对CSS转换和性能（包括硬件加速）进行了很好的讨论。

Answer 3

Animate对此更好。setTimeout()会在一段时间后立即删除css类，但animate逐渐淡入/淡出。

Answer 4

如果您的淡出时间超过100毫秒，使用jquery动画会有所帮助..