变换时CSS动画闪烁：translate3d和宽度

Question

我有一个基于标签的组件，其中活动标签有一个下划线，可以在标签之间设置动画。下划线是一个单独的div，其宽度和位置将动态计算。而不是绝对位置我使用translate3d。

.active-bar {
    transition: all 0.3s linear;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

此栏具有动态计算的以下动画。

transform: translate3d(463.484px, 0px, 0px);
width: 32px;

到

transform: translate3d(20px, 0px, 0px);
width: 254px;

但有时我会看到闪烁，但并非总是如此。我需要使用什么解决方案来避免闪烁。

Answer 1

为了使转换更平滑（并且CPU依赖性更小），仅使用变换和固定宽度。改变这种动态风格：

transform: translate3d(463.484px, 0px, 0px);
width: 32px;

到

width: 100px;   /* fixed in the element */

和动态部分（宽度为32px）

transform: translate3d(463.484px, 0px, 0px) scaleX(0.32);