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

Question

我知道如何让 CSS 过渡起作用，但在这种情况下，我想知道为什么 getCompulatedStyle() 不会更新 right类。以下是使用 getComputedStyle() 方法强制重新计算样式的引用:jQuery addClass method chaining to perform CSS transitions

它的工作示例: http://jsfiddle.net/j8x0dzbz/8/

现在这是我的 fiddle 不起作用: 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
    <div id="blue"></div>
</div>
<button>go</button>

Answer 1

由于 transition 属性位于 $('div div') 对象上，因此它正在执行转换，但 left_zero 类添加的速度太快，以至于元素永远没有机会转换到正确的类坐标。对于此示例，最好的做法是将 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
    <div id="blue"></div>
</div>
<button>go</button>