CSS过渡有时会很滞后

Question

我做了一些不透明度变化的CSS过渡。通过javascript，他们开始添加一个新类或删除它们。

就像是：

.element {
   opacity: 0;
   z-index; -1;
   display: none;
   transition: opacity .2s linear;
}

.changeDisplay {
   display: block;
}

.show {
   z-index: 1;
   opacity: 1
}

通过javascript我创建了一个eventListener，在单击后触发类更改。首先会添加.changeDisplay类，在setTimeout (delay, 4)函数之后，还会添加.show类。 4ms（应该是最小允许延迟值）延迟对于动画淡入（不透明度转换）起作用很重要。

问题是 - 有时这不会按预期工作！动画有时是滞后的，因此动画效果根本不起作用（看起来它只是通过显示更改而显示）。

为什么这样，我能做些什么才能更好地每次都获得流畅的动画？我在Chrome（也在Android移动设备上），Opera，Firefox和IE中观察到了这种行为（Safari因为我家里缺少苹果而未经过测试）。

Answer 1

在我的经验中，我已经看到，如果你想要一个小而微妙的动画，大约0.7s的动画持续时间似乎是最好的。 除此之外，您可以做什么而不是仅仅添加延迟，将代码添加到回调函数中添加.show。这样做会在添加.changeDisplay类后立即添加.show类。 还想要延迟吗？ 过渡延迟：0.4s;