使用CSS动画 - setTimeout的不适变化，打破动画

Question

这里是我的目标描述：

1. 我有框display: none
2. 在某个时刻，我需要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/​​不会强制浏览器应用的第一步？如何强制浏览器在应用第二步之前应用第一步？

Answer 1

解决方案：http://jsfiddle.net/sxny7zs2/

.box{display:none}应该.box{display: block;}

当您设置display:none你从DOM删除对象几乎完全。通过重置为display:block，可以完全恢复对象并开始与其他对象交互。 display功能不是用于动画，而是用于消除物体干扰他人。

我怀疑这是小人：

$box.removeClass('is-animate-enter').addClass('is-animate-active');

通过消除is-animate-enter类，你触发display:none;你可以添加你的下一个课前。这意味着对象从视图中卸载。同时当你做is-animate-active你立即设置display:block和opacity:1。就浏览器而言，您正在创建一个新元素，而不是在此修改旧元素。如前所述，当切换display时，您实际上是loading和unloading一个对象，因此没有动画是可能的。

也许.switchClass()可以解决这个问题，但我不知道，重申display命令是loading和unloading而不是动画。