Javascript 在不查询宽度属性的情况下，转换无法工作

我想通过在js中的div中添加一个类来设置translateX的动画，并在单击事件上进行转换。转换和转换属性添加到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中任何元素的width属性时，它才起作用

下面是一个JSFIDLE：

---

有人能解释为什么这不起作用吗？

这是因为您开始了转换并“同时”修改了

显示属性。更改
显示
将破坏任何转换（诚然，需要引用），因此最好将
显示
更改和实际转换隔离开来：



document.getElementById（'showWidget'）。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
var widget=document.getElementById（'widget'）；
widget.style.display='block'；
//document.getElementById（'widget2'）.clientWidth；
setTimeout（函数（）{
widget.className='visible'；
},0);
});
#小部件{
宽度：200px；
高度：80px；
背景：黑色；
位置：绝对位置；
转换：转换500ms；
转换：translateX（-200px）；
显示：无；
}
#widget.visible{
转换：translateX（200px）；
}
#widget2{
位置：绝对位置；
右：0
}

xxx
这里的问题是
显示的初始设置：无
。对于浏览器的布局管理器，这表明布局应该像所讨论的元素甚至不在DOM中一样进行（请注意，它仍然在DOM中）。这意味着CSS样式
转换：translateX（-200px）将不被应用

这样做：

widget.style.display = 'block';
widget.className = 'visible';

基本上同时触发两个修改-只有在两个语句都执行后才重新执行布局。插入
document.getElementById（'widget2'）.clientWidth
（
clientHeight
也起作用）触发布局管理器重新绘制，从而注册
transform:translateX（-200px）

正如其他人在我之前提到的，解决方案是使用
不透明度
而不是
显示
（这是我的选择），或者使用延迟为0的
设置超时
（请参见）。
因为您“同时”修改了
显示
属性：您可以使用不透明度而不是显示：我不知道显示道具对我的动画有如此大的影响。谢谢你的快速回复。我还想到了通过查询触发某种布局widths@yacon因为
display
不是“可转换的”，所以任何涉及
display
的转换（即使您明确定义了
转换属性来排除它）都将失败。