有人可以向我解释转换位置 left
或 right
属性或 -transform: translateX(n)
的区别吗,因为两者似乎都达到了同样的目的,但可以独立应用。我了解硬件加速的可能性,但这取决于实现。
// psuedo code;
#box {
-transition-property: all;
-transition-duration: 1s;
}
// javascript
box.style.transform = "translateX(200px)";
vs
box.style.left = "200px";
一个比另一个有什么优势? 谢谢,
p
最佳答案
渲染层的绘制顺序为:
- 布局层
- 油漆层
- 合成器层
一个层的重绘会触发后续层的重绘。
改变 left
或 margin
将触发 layout layer 的重绘(这反过来会触发其他两层的重绘)对于动画元素和 DOM 中的后续元素。
更改 transform
将触发合成层 中的重绘仅针对动画元素(DOM 中的后续元素不会 strong> 被重绘)。
性能(因此每秒帧数,或者简单地说,动画流畅度)的差异是巨大的。即使在性能良好的机器上(当处理器繁忙时),使用第一种技术通常也会导致动画抖动,而即使在资源有限的系统上,第二种技术也可能会平稳运行。
使用 transform
的另一个优点是合成器重绘得到了高度优化(对多个元素的动画会导致所有元素都重绘),而更改布局层将在每个元素的每次更改后触发重绘。
关于渲染技术和渲染性能的更详细解释我推荐谷歌的Web Fundamentals .
关于CSS 变换与位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7108941/