如何在使用CSS过渡时防止重绘其他元素
如何在使用CSS过渡时防止重绘其他元素
提问于 2019-01-21 22:38:05
我正在尝试阻止浏览器重绘，以提高使用CSS动画的大型单页应用程序的性能。
如果我有一个具有:hover { transform: scale(...) }效果的元素，我可以通过使用前面提到的will-change: transform和/或transform: translateZ(0)来防止重绘。
但是，只要我向该元素添加一个transition，许多元素就会再次被重新绘制。
这里有一个demo codepen和一个gif。
阻止这种重绘的惟一方法是在DOM顺序中将其他元素放在动画元素之前，或者对动画元素进行z索引，使其高于其他元素。但是对于一个复杂的单页面应用程序，我不希望必须对任何只想要悬停过渡的元素的z索引进行微观管理。
还有其他想法或参考资料吗？我还没有看到在其他地方讨论过transition的这个具体问题。
回答 1
Stack Overflow用户
发布于 2019-01-22 00:46:31
看起来.other上的position: absolute;并没有创建新的层，我可以通过将transform: translateZ(0)添加到.other类来解决这个问题。
考虑到您正在SPA上工作，我不确定这种方法是否可行，因为在圆圈之后可能有数百个元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54292237
复制相关文章
相似问题
腾讯云开发者
