CSS過渡不會在DOM操作工作

Question

比方說，我有一些塊與定義left風格的酒店，並與transition該屬性：

<div id="caret" class="caret" style="left: 20px"></div> 

.caret { 
    transition: left 0.3s; 
} 

好了，現在當我通過$.css()改變left我已經得到的一切完美的過渡：

$('#caret').css('left', '100px'); 

但是，當我從一個地方移動塊到另一個DOM，然後改變left，沒有什麼轉變，它只是立即跳轉到給定n值：

$('#caret').appendTo('#container').css('left', '50px'); 

Hovever，如果我稍等一下，再次更改left，轉換又回來了。感覺它需要一些時間來準備。

我創建了一個簡單的示範，證明這個問題：http://jsfiddle.net/L624m/2/

那麼，這是爲什麼發生？

Answer 1

問題是，您的JavaScript代碼在典型的瀏覽器中不會讓DOM首先創建新元素，所以樣式實際上會直接應用到新元素，從而不會導致任何轉換。

附加元素後，您必須「中斷」JavaScript並讓DOM注意到新元素;通常這是通過使用一個setTimeout與0毫秒的時間間隔，就像做：

setTimeout(function(){ 
    caret.css('left', left === '20px' ? '100px' : '20px'); 
},0); 

所以，因爲setTimeout，瀏覽器總是會後DOM的變化着實讓代替排隊的left風格變化也正在排隊。