是更好地使用jQuery fadeIn或CSS3动画？ [英] Is it better to use jQuery fadeIn or CSS3 animations?

问题描述

我使用一些PHP和JavaScript创建一个简单的画廊，我试图做一个图像之间的淡入淡出过渡。然后我想知道使用CSS动画之间是否有性能差异，例如：

I am creating a simple gallery using some PHP and JavaScript and am trying to do a fade transition between images. Then I wondered if there is a performance difference between using a CSS animation, e.g.:

@-webkit-keyframes fadeIn {
0%   { opacity: 0; }
100% { opacity: 1; }
}

和一个jQuery fadeIn。

and a jQuery fadeIn.

我想使用fadeIn的回调，但我也可以使用CSS的计时器。

I would like to use the callback from the fadeIn but I also can just use a timer with the CSS I guess.

这两种方法对于大图像来说可能更好吗？我不知道有什么区别，但想知道是否会影响速度较慢的电脑。

Are either of these likely to work better with large images? I can't see a difference, but wondered if it might affect slower computers.

推荐答案

！ JQuery不是一些魔术工具来解决你的所有问题！

The hell is wrong with you people?! JQuery is not some magic tool to solve all of your problems!

正确的答案是两者。如果可能，使用CSS3转换，并使用特征检测库，如Modernizr，以确定用户的浏览器是否能够CSS3转换。

The correct answer would be both. Use CSS3 transitions if possible, and use a feature detection library such as Modernizr to determine if the user's browser is capable of CSS3 transitions.

如果且仅当用户的浏览器不支持本机动画时，才应使用jQuery。

If AND ONLY IF the user's browser does not support native animations, only then should you use jQuery.

本地动画是GPU加速的，从而减少对CPU的约束，以及更流畅的动画。此外，它不要求JAVASCRIPT也不需要额外的请求拉。

Native animations are GPU accelerated, resulting in less constraint on the CPU, and much smoother animations. Also, IT DOESN'T REQUIRE JAVASCRIPT nor does it take extra requests to pull off.

这篇关于是更好地使用jQuery fadeIn或CSS3动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！