CSS3 过渡:是“过渡:全部"吗?比“转换:x"慢? [英] CSS3 Transitions: Is "transition: all" slower than "transition: x"?

问题描述

我有一个关于 css3 过渡属性的渲染速度的问题.

I have a question about rendering speed for the css3 transition property.

假设我有许多元素:

div, span, a {transition: all}

div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

使用一个声明 div, span, a {transition: all} 来定位所有这些元素的所有过渡会更有效.但我的问题是:就针对每个元素的特定过渡属性的动画渲染的平滑度和速度而言，它会更快"吗?例如:

It's much more efficient to target all of the transitions for all of those elements using one declaration div, span, a {transition: all}. But my question is: would it be "faster" in terms of the smoothness and quickness of the animation rendering to target each element's specific transition property? For example:

div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

我提出这个问题的逻辑是，如果 css引擎"必须搜索所有"过渡属性，即使元素只有一个属性，它也可能会减慢速度.

My logic in asking this is that if the css "engine" has to search for "all" transition properties even if there is just one single property for an element, that it might slow things down.

有谁知道是这样吗?谢谢！

Does anyone know if that's the case? Thanks!

推荐答案

是的，使用 transition: all 可能会导致性能方面的重大缺陷.在很多情况下，浏览器会在需要进行过渡时进行查看，即使用户不会看到它，例如颜色更改、尺寸更改等.

Yes, using transition: all could cause major drawbacks in performance. There can be a lot of cases where the browser would look if it needs to make a transition, even if user won't see it, like the color changes, dimension changes etc.

我能想到的最简单的例子是:http://dabblet.com/gist/1657661——尝试改变缩放级别或字体大小，你会看到一切都变得动画了.当然不会有很多这样的用户交互，但可能有一些界面更改会导致某些块中的回流和重绘，即可以告诉浏览器尝试动画这些更改.

The simplest example I can think of is this: http://dabblet.com/gist/1657661 — try to change the zoom level or the font's size and you'll see that everything become animated.Of course there couldn't be a lot of such user interactions, but there could be some interface changes that can cause the reflow and repaints in some blocks, that could tell the browser to try and animate those changes.

因此，一般而言，建议您不要使用 transition: all 而是使用直接过渡.

So, in general, it's recommended that you won't use the transition: all and would use the direct transitions instead.

all 过渡还有其他一些可能出错的地方，例如页面加载时的动画飞溅，它首先呈现块的初始样式，然后将样式应用到一部动画.在很多情况下，这不是你想要的:)

There are some other things that can go wrong with the all transitions, like the splash of animation on page load, where it would at first render the initial styles for blocks and then apply the style with an animation. In a lot of cases it wouldn't be the thing that you want :)

这篇关于CSS3 过渡:是“过渡:全部"吗?比“转换:x"慢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！