CSS转换不会在没有`setTimeout`的情况下运行

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