CSS转换不适用于DOM操作

Question

假设我已经定义了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/

那么，为什么会这样呢？

Answer 1

问题在于，在典型的浏览器中，您的JavaScript代码不会让DOM首先创建新元素，因此该样式实际上将直接应用于新元素，从而根本不会导致转换。

添加元素后，您必须“中断”JavaScript并让DOM首先注意到新元素;通常这是通过使用{0}间隔的setTimeout来完成的，例如：

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

因此，由于setTimeout，浏览器将始终对left样式中的更改进行排队真正实现DOM中的更改而不是自行排队