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>
查看代码
Google Chrome 70.xx(11.2018)
让其在Google Chrome上运行时,您会看到block2
立即完成转换,而block1
旋转Z 315度。
IE 11(2015)
block1
和block2
运行得很好。
为什么会发生?我花了1个小时才弄清楚
我的结论
block2.offsetLeft喜欢强制Chrome浏览器计算元素的位置和大小,因此可以在下一步中进行转换。
如果我们不这样做,Chrome将在下一帧渲染=>中进行计算,因此none
到inline-block
不会运行过渡(仅动画)