Переход CSS не запускается без `setTimeout`

Question

Я использовал JS, чтобы установить непрозрачность элемента на 0, затем установить переход непрозрачности и, наконец, установить непрозрачность в 1. Я ожидаю увидеть элемент мгновенно исчезают, а затем исчезают. Вместо этого ничего не происходит.

Однако, если я добавлю setTimeout перед установкой перехода и установкой непрозрачности в 1, переход запускается. Что тут происходит? Изменены ли версии браузеров CSS? Есть ли лучший способ, чем рубить setTimeout?

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