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);

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

CSS animation flickers on transform: translate3d along with width

css

css-transitions

css-transforms

css-animations