沒有`setTimeout`命令，CSS過渡將無法運行

Question

我使用JS將某個元素的不透明度設置為0，然后設置了不透明度過渡，最后將不透明度設置為1。我希望看到該元素立即消失，然后逐漸消失。相反，什么也沒發生。

但是，如果在設置過渡並將不透明度設置為1之前添加了setTimeout ，則會觸發過渡。 這里發生了什么事？ 瀏覽器是否在批處理CSS更改？ 有沒有比setTimeout hack更好的方法？

https://jsfiddle.net/Lpk5en54/2/

<span>abeclc</span>
<button>Go</button>

var span = document.getElementsByTagName("span")[0];
document.getElementsByTagName("button")[0].onclick = function () {
    span.style.transition = '';
    span.style.opacity = '0';
    //setTimeout(function () {
        span.style.transition = 'opacity 2s';
        span.style.opacity = '1';
    //}, 100);
};

Answer 1

您需要觸發重排： https : //jsfiddle.net/Lpk5en54/3/

var span = document.getElementsByTagName("span")[0];
document.getElementsByTagName("button")[0].onclick = function () {

    span.style.transition = '';
    span.style.opacity = '0';
 //   setTimeout(function () {
    var foo = span.offsetTop
        span.style.transition = 'opacity 2s';
        span.style.opacity = '1';
  //  }, 100);
};