为什么我在setTimeout中需要值为'0'才能转换到工作状态？

Question

我正在尝试将classList api与CSS转换结合使用，将一个项目添加到列表中，删除一个使其透明的类，然后将其淡入。

HTML

<ul id="container">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
</ul>

CSS

.is-transparent {
    opacity: 0;
}

#container {
    li {
        -webkit-transition: opacity 2.3s;
        -moz-transition: opacity 2.3s;
        transition: opacity 2.3s;
        &.is-transparent {
            opacity: 0;
        }
    }
}

JS

function runner() {
    var container = document.getElementById('container');
    var newItem = document.createElement('li');

    // item attrs
    newItem.innerText = 'test Above';
    newItem.classList.add('is-transparent');

    // do work
    container.insertBefore( newItem, container.firstElementChild );

    // transition opacity (ideally)
    newItem.classList.remove('is-transparent');
}

我希望这可以工作，因为类给它0不透明度，当它被删除时它应该有不透明度：1;但它没有：http://jsfiddle.net/7TpY6/1/

添加setTimeout为0（如下所示）使转换工作：http://jsfiddle.net/3N2Bn/1/

window.setTimeout(function(){
    newItem.classList.remove('is-transparent');
}, 0);

为什么？