作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我对 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“引擎”必须搜索“所有”过渡属性,即使元素只有一个属性,它也可能会减慢速度。
有人知道吗?谢谢!
最佳答案
是的,使用 transition: all
可能会导致性能上的重大缺陷。在很多情况下,浏览器会在需要进行转换时进行查看,即使用户看不到它,例如颜色变化、尺寸变化等。
我能想到的最简单的例子是:http://dabblet.com/gist/1657661 — 尝试更改缩放级别或字体大小,您会看到一切都变成了动画。当然不会有很多这样的用户交互,但可能会有一些界面更改会导致重排和重绘一些 block ,可以告诉浏览器尝试为这些更改设置动画。
因此,一般来说,建议您不要使用 transition: all
而是使用直接转换。
all
转换还有其他一些问题,比如页面加载时的动画飞溅,它会首先渲染 block 的初始样式,然后应用样式一个动画。在很多情况下,这不是您想要的:)
关于performance - CSS3 过渡 : Is "transition: all" slower than "transition: x"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26593617/
我是一名优秀的程序员,十分优秀!