CSS 3过渡:“转换:所有”是否比“转换:X”慢?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (67)

关于CSS 3转换属性的呈现速度,我有一个问题。

假设我有一些元素:

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“Engine”必须搜索“所有”转换属性,即使一个元素只有一个属性,那么它可能会减慢速度。

如果是这样的话,有人知道吗?谢谢!

提问于
用户回答回答于

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

我能想到的最简单的例子是:http://dabblet.com/gist/1657661--试着改变缩放级别或字体大小,你会发现所有的东西都变成了动画。当然,不可能有太多这样的用户交互,但可能会有一些界面变化,可能会导致某些块的再流和重新绘制,这可以告诉浏览器尝试并动画这些更改。

因此,一般来说,建议不要使用transition: all并将使用直接转换代替。

还有一些其他的事情可能会出错。all转换,就像页面加载上的动画一样,首先呈现块的初始样式,然后用动画应用样式。在很多情况下,这并不是你想要的:)

用户回答回答于

我一直在使用all对于我需要动画多个规则的情况。例如,如果我想更改color&background-color:hover

但是事实证明,对于过渡,您可以针对多条规则,所以永远不会。需要求助于all背景。

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

扫码关注云+社区

领取腾讯云代金券