如何在使用CSS过渡时防止重绘其他元素
如何在使用CSS过渡时防止重绘其他元素
提问于 2019-01-21 14: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-21 16:46:31
看起来.other上的position: absolute;并没有创建新的层，我可以通过将transform: translateZ(0)添加到.other类来解决这个问题。
考虑到您正在SPA上工作，我不确定这种方法是否可行，因为在圆圈之后可能有数百个元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54292237
复制
相似问题
时间序列趋势
趋势时间序列数据
时间序列数据的趋势
建立和分析时间序列的趋势
时间序列的趋势与季节性
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
