强制CSS转换在JavaScript函数中多次更新

我知道如何让CSS转换工作，但在这种情况下，我想知道为什么 getComputedStyle()不会更新right类。 这里是使用getComputedStyle()方法强制重新计算样式的引用： jQuery addClass方法链接以执行CSS转换

它工作的一个例子： http ： //jsfiddle.net/j8x0dzbz/8/

现在这里是我的小提琴不起作用： http ： //jsfiddle.net/me8ukkLe/12/

这是我的代码：

 $('button').click(function() { $('div div').eq(0).addClass('right'); window.getComputedStyle(document.getElementById('blue')).left; // FORCE "right" CLASS $('div div').eq(0).addClass('left_zero'); }); 

 #container { border: 1px solid purple; position: absolute; height: 12px; width: 12px; } #blue { background-color: blue; } button { margin-top: 30px; } div div { position: absolute; width: 10px; height: 10px; left: -10px; transition: left 1000ms; } .right { left: 10px; } .left_zero { left: 0px; } 

  
 
 
 go 

Answer 1

由于transition属性位于$('div div')对象上，因此它正在执行转换，但left_zero类的添加速度非常快，以至于元素永远不会有机会转换到right类坐标。 对于此示例，最好的做法是将transition属性放在left_zero类上。

 $('button').click(function() { $('div div').eq(0).addClass('right'); window.getComputedStyle(document.getElementById('blue')).left; // FORCE "right" CLASS console.log(window.getComputedStyle(document.getElementById('blue')).left); $('div div').eq(0).addClass('left_zero'); }); 

 #container { border: 1px solid purple; position: absolute; height: 12px; width: 12px; } #blue { background-color: blue; } button { margin-top: 30px; } div div { position: absolute; width: 10px; height: 10px; left: -10px; } .right { left: 10px; } .left_zero { left: 0px; transition: left 1000ms; } 

  
 
 
 go