我决定用：
* {
-webkit-transform: translate3d(0px,0px,0px);
}
当我看到它使我的动画更加平滑时,可能是因为它强制硬件加速.但我还需要进行一些z-index调整,以便在文本前面放置一个形状,以便在动画的某个位置屏蔽该文本.问题是：我的(灰色)形状必须与另一个形状(下面示例中的绿色形状)同步移动,该形状位于文本后面.
我构建了一个简单的example,使其更具视觉效果.它适用于Firefox,但我无法让它在Chrome和Safari上运行.好吧,如果我删除translate3d的东西,它可以工作,但由于我的实际项目需要大量的滑动和平滑的动画,如果我这样做,用户体验将受到影响.
最佳答案
如果没有translate3D,可以将对等DOM节点(您的文本)放在另一个对等体(您的处理程序)和它的一个子节点(您的掩码)之间,但这只是因为您的文本和处理程序都没有明确的z索引.在这种情况下,首先渲染所有非z索引块,然后最后渲染掩码 – 最后显示在顶部(即使它是子元素).这有意义吗？好吧,它是浏览器的工作方式.
原文链接：https://www.f2er.com/html/425878.html但是,当您将translate3d添加到“*”时,您为每个元素添加了“堆叠上下文”,因此在没有translate3d的情况下“正常工作”现在没有.顺便说一句,adding an explicit z-index to each element in your example – 也“毁了”你的面具.同样,你不能在另一个对等体和它的一个子节点之间放置一个对等DOM节点,因为就相对于叔叔/阿姨节点的定位而言,子节点继承了父节点的z-index.
我的建议是不要使用你的东西,这样你想在z轴上相对于彼此定位的所有东西都是一个DOM对等体.这需要手动计算每个元素的绝对定位,并且您将失去溢出剪切的好处,但是hey,it works.您还可以通过执行具有正和负z值的3D变换来复制它 – 但同样,仅在对等元素之间.
(将z-index标记为！important,只需撤消级联并将元素置于级联堆叠顺序之上.这是一个黑客攻击.)
