jquery - CSS 过渡不适用于 DOM 操作

Question

假设我有一些定义了leftstyle 属性的块，并且transition为该属性定义了：

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

.caret {
    transition: left 0.3s;
}

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

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

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

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

然而，如果我稍等片刻left再改变，过渡又回来了。感觉需要一些时间来准备。

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

那么，为什么会这样呢？

score 1 · Accepted Answer

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

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

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

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

1 回答 1