我做了一些不透明度变化的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因为我家里缺少苹果而未经过测试)。
答案 0 :(得分:0)
在我的经验中,我已经看到如果你想要一个小而微妙的动画,大约0.7s的动画持续时间似乎是最好的。
除此之外,您可以做什么而不是仅仅添加延迟,将代码添加到回调函数中添加.show。这样做会在添加.changeDisplay类后立即添加.show类。
还想要延迟吗?
转换延迟:0.4s;