使用 CSS 过渡时如何防止重绘其他元素答案

【问题标题】：How to prevent repaint of other elements when using CSS transition使用 CSS 过渡时如何防止重绘其他元素
【发布时间】：2019-01-22 01:09:05
【问题描述】：

我试图阻止浏览器重绘以提高使用 CSS 动画的大型单页应用的性能。

如果我有一个具有:hover { transform: scale(...) } 效果的元素，我可以使用will-change: transform 和/或transform: translateZ(0) 来防止重绘，如here 所述。

但只要我向该元素添加transition，许多元素就会重新开始重新绘制。

这是demo codepen 和它的 gif

唯一可以防止这种重绘的方法是在 DOM 顺序中将其他元素放在动画元素之前，或者将动画元素的 z-index 放在其他元素之上。但是对于一个复杂的单页应用程序，我不想对任何只需要悬停过渡的元素的 z-index 进行微观管理。

还有其他想法或参考吗？我还没有看到其他地方讨论过的transitions 的这个具体问题。

【问题讨论】：

【解决方案1】：

似乎.other 上的position: absolute; 没有创建新层，我可以通过将transform: translateZ(0) 添加到.other 类来解决此问题。

鉴于您正在处理 SPA，我不确定这种方法的可行性，因为圆圈后面可能有数百个元素。

【讨论】：