javascript - 如果不查询宽度属性，过渡就不起作用

Question

我想通过向 js 中的 div 添加一个类来为点击事件上的 translateX 设置动画。 transform 和 transition 属性添加到 css 文件中。

var widget = document.getElementById('widget');    
widget.style.display = 'block';
document.getElementById('widget2').clientWidth; //comment this line out and it wont work
widget.className = 'visible';

只有当我在添加类之前查询 dom 中任何 元素的宽度属性时，它才有效。

这是一个 jsfiddle: https://jsfiddle.net/5z9fLsr5/2/

谁能解释为什么这不起作用？

Answer 1

那是因为您开始转换并“同时”修改了 display 属性。更改 display 会破坏任何转换(无可否认，需要引用)，因此将 display 更改和实际转换隔离开来是个好主意:

https://jsfiddle.net/5z9fLsr5/3/

document.getElementById('showWidget').addEventListener('click', function(e) {
    e.preventDefault();
    var widget = document.getElementById('widget');    
    widget.style.display = 'block';
    //document.getElementById('widget2').clientWidth;
    window.setTimeout(function(){
        widget.className = 'visible';
    },0);
});

#widget {
    width: 200px;
    height: 80px;
    background: black;
    position: absolute;
    transition: transform 500ms;
    transform: translateX(-200px);
    display: none;
}
#widget.visible {
    transform: translateX(200px);
}



#widget2 {
    position: absolute;
    right: 0
}

<a href="#" id="showWidget">show</a>
<div id="widget"></div>
<div id="widget2">xxx</div>

查询 clientWidth 似乎会“暂停”执行一段时间，所以它也有效。