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风格变化也正在排队。