使用 CSS 过渡时如何防止重绘其他元素
Pau*_*lan 7 css repaint css-transforms css-animations
我试图阻止浏览器重新绘制以提高使用 CSS 动画的大型单页应用程序的性能。
如果我有一个对其:hover { transform: scale(...) }有影响的元素，我可以通过使用will-change: transform和/或此处transform: translateZ(0)提到的来防止重绘。
但是一旦我transition向该元素添加 a ，许多元素就会重新开始重新绘制。
这是一个演示代码笔和它的 gif
唯一可以防止这种重绘的方法是将其他元素放在 DOM 顺序中的动画元素之前，或者将动画元素的 z-index 索引在其他元素之上。但是对于复杂的单页应用程序，我不想对任何只需要悬停过渡的元素的 z-index 进行微观管理。
任何其他想法或参考？我还没有transition在别处讨论过这个与s 相关的特定问题。