CSS 过渡不适用于 DOM 操作答案

【问题标题】：CSS transition doesn't work on DOM manipulationCSS 过渡不适用于 DOM 操作
【发布时间】：2013-02-07 00:10:44
【问题描述】：

假设我有一些块，其中定义了 left 样式属性，并为该属性定义了 transition：

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

.caret {
    transition: left 0.3s;
}

好的，现在当我通过 $.css() 更改 left 时，一切都完美过渡：

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

但是当我在 DOM 中将块从一个位置移动到另一个位置然后更改 left 时，没有任何过渡，它只是立即跳转到给定值：

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

但是，如果我稍等片刻并再次更改 left，则转换又回来了。感觉需要一些时间来准备。

我创建了一个简单的展示来演示这个问题：http://jsfiddle.net/L624m/2/

那么，为什么会这样呢？

【问题讨论】：

【解决方案1】：

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

添加元素后，你必须“中断” JavaScript，让 DOM 首先注意到新元素；通常这是通过使用间隔为 0 毫秒的 setTimeout 来完成的，例如：

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

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

【讨论】：