var block1 = document.getElementById('block1');
var block2 = document.getElementById('block2');
document.getElementById('button1').addEventListener('click', function (e) {
block1.style.display = 'inline-block';
block1.className = 'active';
block2.style.display = 'inline-block';
block2.offsetLeft; //<----------- look at this
block2.className = 'active';
})#block1{display:none;width:100px;height:100px;background:red;transition:5s all}
#block2{display:none;width:100px;height:100px;background:green;transition:5s all}
#block1.active, #block2.active{transform:rotateZ(315deg)}<button id="button1">Run</button>
<div id="block1"></div>
<div id="block2"></div>Look at code
Google Chrome 70.xx (11.2018)
Let run it on Google Chrome you will see block2 rotateZ 315deg while block1 immediately finished transition.
IE 11 (2015)
block1 & block2 run very well.
Why does it happen? It take me 1h in headache to figure out
My conclude
block2.offsetLeft like to force Chrome to calc postion and size of element, so they can transition in next step.
If we don't do that Chrome will calc in next frame render => so none to inline-block don't run transition (only animation)
