CSS过渡不适用于DOM操作

Question

Let's say I've got some block with left style property defined and with transition for that property:

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

.caret {
    transition: left 0.3s;
}

Okay, now when I change left via $.css() I've got everything transitioning perfectly:

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

But when I move the block from one place to another in DOM and then change left , nothing transitioning, it just immediately jumps to the given value:

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

Hovever, if I wait a bit and change left again, transition is back again. It feels like it needs some time to prepare.

I've created a simple showcase to demonstrate this issue: http://jsfiddle.net/L624m/2/

So, why is that happening?

Answer 1

The problem is that your JavaScript code, in a typical browser, won't let the DOM create the new element first, so the style will actually be applied directly to the new element, causing no transition at all.

After appending the element you have to "interrupt" the JavaScript and let the DOM notice the new element first; usually this is done by using a setTimeout with 0ms interval, like:

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

So, because of the setTimeout , the browser will always queue the change in the left style after the changes in DOM are really made instead of being queued themselves too.