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

Question

我正在尝试防止浏览器重绘以提高使用CSS动画的大型单页应用程序的性能。

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

但是，一旦我向该元素添加transition，许多元素就会开始重新粉刷。

这是demo codepen和它的gif

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

还有其他想法或参考吗？在其他地方讨论过的transition中，我还没有看到这个特定的问题。

Answer 1

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

JSbin

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