CSS过渡有时会很滞后

时间:2017-12-17 10:57:23

标签: javascript css animation css-transitions

我做了一些不透明度变化的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因为我家里缺少苹果而未经过测试)。

1 个答案:

答案 0 :(得分:0)

在我的经验中,我已经看到如果你想要一个小而微妙的动画,大约0.7s的动画持续时间似乎是最好的。

除此之外,您可以做什么而不是仅仅添加延迟,将代码添加到回调函数中添加.show。这样做会在添加.changeDisplay类后立即添加.show类。
还想要延迟吗?
转换延迟:0.4s;