1

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

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/

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

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

为什么？

4

0 回答 0