Javascript 为什么我需要一个值'；0'；在setTimeout中，以便我过渡到工作？

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

html

js

我认为这是可行的，因为类给它0不透明度，当它被删除时，它应该有不透明度：1；但事实并非如此：

添加setTimeout 0（如下所示）可使转换正常工作：

---

为什么？

我一点也不知道，但是什么让你尝试设置超时为0？

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

.is-transparent {
    opacity: 0;
}

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

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');
}

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