performance - CSS3 过渡 : Is "transition: all" slower than "transition: x"?

Question

我对 css3 过渡属性的渲染速度有疑问。

假设我有一些元素:

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} 来针对所有这些元素的所有转换会更有效。但我的问题是:就动画渲染的平滑度和速度而言，以每个元素的特定过渡属性为目标是否会“更快”？例如:

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“引擎”必须搜索“所有”过渡属性，即使元素只有一个属性，它也可能会减慢速度。

有人知道吗？谢谢!

Answer 1

是的，使用 transition: all 可能会导致性能上的重大缺陷。在很多情况下，浏览器会在需要进行转换时进行查看，即使用户看不到它，例如颜色变化、尺寸变化等。

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

因此，一般来说，建议您不要使用 transition: all 而是使用直接转换。

all 转换还有其他一些问题，比如页面加载时的动画飞溅，它会首先渲染 block 的初始样式，然后应用样式一个动画。在很多情况下，这不是您想要的:)