jQuery性能: css与动画方法

Question

我试图避免使用animation，因为它比CSS3动画慢。

我只是想知道，使用css方法是否仍然比animation快，但比直接使用transform3d的CSS3动画要慢。

$(this).animate({'opacity' : 'show', 'top' : topPosition+'px'});

vs

$(this).css('top', topPosition+'px');

正如您所看到的，我不能直接使用css3 transform3d，因为我需要位置参数，它是动态生成的。

CSS

#flashMessage{  
    position: relative;
    transition: all 1.4s ease-in-out;
    -webkit-transition: all 1.4s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 1.4s ease-in-out; /** Firefox **/
    -o-transition: all 1.4s ease-in-out; /** Opera **/
}

Answer 1

jquery动画与jquery不同，它首先在一组时间内使elm动画化，而另一种则只是立即应用css属性而没有动画化。

css设置可能更快，但并不是所有浏览器都支持它，特别是ie <9。

动画代码中有语法错误，应该是：

$(this).animate({'opacity' : 1, 'top' : topPosition+'px'}); //+'px' is not required it would work with/without it.

如果您希望您的动画在所有浏览器上都能工作，我将使用动画，否则如果您希望它在主要浏览器中工作，那么只有css转换才是更好的选择，尽管jquery并没有给您提供灵活性。

Answer 2

当我可以使用CSS动画时，我倾向于使用jquery来添加和删除动画类，这样动画就可以在我想要的时候启动，并且在我想要的时候停止。

将两者结合使用可能是有用的。

当然，在使用CSS动画时，您需要考虑浏览器将处理哪些内容。

http://api.jquery.com/addClass/