javascript - 谷歌浏览器错误还是什么？

Question

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>

看代码

谷歌浏览器 70.xx (11.2018)

让我们在谷歌浏览器上运行它，你会看到block2rotateZ 315deg，同时block1立即完成转换。

IE 11 (2015)

block1&block2运行得很好。

为什么会这样？我头疼了 1 小时才弄明白

我的总结

block2.offsetLeft 喜欢强制 Chrome 计算元素的位置和大小，以便它们可以在下一步中转换。如果我们不这样做，Chrome 将在下一帧渲染中计算 => 所以none不要inline-block运行过渡（仅动画）

标签： javascripthtmlcss