CSS 动画在变换时闪烁:随宽度一起翻译 3d

Question

>我有一个基于选项卡的组件，其中活动选项卡有一个下划线，该下划线在选项卡之间动画。下划线是一个单独的div，其宽度和位置将动态计算。我使用的是翻译3d，而不是绝对位置。

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