假设我已经定义了left样式属性的一些块，并为该属性定义了transition：
<div id="caret" class="caret" style="left: 20px"></div>
.caret {
transition: left 0.3s;
}
好的，现在当我通过left更改$.css()时，我已经完成了一切过渡：
$('#caret').css('left', '100px');
但是当我在DOM中将块从一个地方移动到另一个地方然后更改left时，没有任何转换，它只是立即跳转到给定值：
$('#caret').appendTo('#container').css('left', '50px');
Hovever，如果我稍等一会再改变left，转换又回来了。感觉需要一些时间来准备。
我创建了一个简单的展示来演示此问题：http://jsfiddle.net/L624m/2/
那么，为什么会这样呢？
答案 0 :(得分：1)
问题在于，在典型的浏览器中，您的JavaScript代码不会让DOM首先创建新元素，因此该样式实际上将直接应用于新元素，从而根本不会导致转换。
添加元素后，您必须“中断”JavaScript并让DOM首先注意到新元素;通常这是通过使用{0}间隔的setTimeout来完成的，例如：
setTimeout(function(){
caret.css('left', left === '20px' ? '100px' : '20px');
},0);
因此，由于setTimeout，浏览器将始终对left样式中的更改进行排队真正实现DOM中的更改而不是自行排队