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 - 尝试更改缩放级别或字体的大小，你会看到一切都变得动画。当然，不可能有很多这样的用户交互，但可能会有一些界面更改可能导致某些块中的重排和重新绘制，这可能会告诉浏览器尝试动画这些更改。

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

all转换还有一些其他问题可能出错，例如页面加载时动画的闪现，它首先渲染块的初始样式，然后使用动画应用样式。在很多情况下，它不是你想要的东西：）

Answer 2

我一直在使用all来处理需要动画多个规则的情况。例如，如果我想更改color＆amp; background-color上的:hover。

但事实证明，您可以针对转换定位多个规则，因此您永远不会需要来使用all设置。

.nav a {
  transition: color .2s, text-shadow .2s;
}

CSS3过渡：“过渡：全部”比“过渡：x”慢吗？

2 个答案: