使用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而不是動畫。