CSS3过渡："transition: all“比"transition: x”慢吗？
CSS3过渡："transition: all“比"transition: x”慢吗？
提问于 2012-01-21 04:25:32
我有一个关于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“引擎”必须搜索“所有”转换属性，即使一个元素只有一个属性，它也可能会减慢速度。
有没有人知道是不是这样？谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-01-23 01:01:04
是的，使用transition: all可能会导致性能上的重大缺陷。在很多情况下，浏览器会查看是否需要进行转换，即使用户看不到它，比如颜色变化、尺寸变化等。
我能想到的最简单的例子是：http://dabblet.com/gist/1657661 -尝试改变缩放级别或字体的大小，你会看到所有的东西都变成了animated.Of，当然不可能有很多这样的用户交互，但可能会有一些界面更改，这可能会导致一些块中的回流和重绘，这可能会告诉浏览器尝试并动画这些更改。
因此，一般来说，建议您不要使用transition: all，而是使用直接转换。
在all转换中还有一些其他的错误，比如页面加载时动画的飞溅，它会首先呈现块的初始样式，然后将样式与动画一起应用。在很多情况下，这不是你想要的东西:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8947441
复制相关文章
相似问题