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

时间:2018-11-15 04:25:07

标签: javascript html css

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)

block1block2运行得很好。

为什么会发生?我花了1个小时才弄清楚

我的结论

block2.offsetLeft喜欢强制Chrome浏览器计算元素的位置和大小,因此可以在下一步中进行转换。 如果我们不这样做,Chrome将在下一帧渲染=>中进行计算,因此noneinline-block不会运行过渡(仅动画)

0 个答案:

没有答案