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>

查看代码

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不会运行过渡（仅动画）

Google Chrome浏览器错误还是什么？

0 个答案: