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更改为requestAnimationFrame可以解决问题，但它不会 - check my example

为什么setTimeout / requestAnimationFrame不强制浏览器应用第一步？如何在申请第二步之前强制浏览器应用第一步？

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，而不适用于动画。