这里是我的目标描述:使用CSS动画 - setTimeout的不适变化,打破动画
- 我有框
display: none
- 在某个时刻,我需要
opacity
动画来显示它。
这里我的解决办法:
1. transition: opacity 0.5s ease-in-out;
2.在第一个步骤设置display: block; opacity: 0
3.在设置display: block; opacity: 1
第二步,做在setTimeout()
申请的第一步。
问题是,第一步只适用于某些情况 - 有时它有效/有时不适用,浏览器只是跳过第一步。我想改变setTimeout
到应该可以解决问题,但它不会 - check my example
为什么setTimeout
/不会强制浏览器应用的第一步?如何强制浏览器在应用第二步之前应用第一步?
它必须在开始时隐藏+我通过'.box.is-animate-enter'设置'display:block'。我的问题:为什么'setTimeout'只工作somites /原因是什么/如何使它稳定? – 2015-03-31 00:04:46
我不明白你的意思是'有时候有效'。我看到的行为是不变的,有或没有分配“显示”。唯一的区别是它使用'display:block;'来动画,而使用'display:none'则只会闪烁。我将用可能的解释编辑我的解决方案。 – 2015-03-31 00:15:52
如果你使用它,你会看到有时它工作。我用setTimeout而不是requestAnimationFrame更新了一个例子。在我的电脑上,它在大多数情况下在Chrome中运行,并且在FF中不起作用 – 2015-03-31 13:26:27