强制 CSS 过渡在 JavaScript 函数中多次更新答案

【问题标题】：Force CSS transition to update multiple times in JavaScript function强制 CSS 过渡在 JavaScript 函数中多次更新
【发布时间】：2015-12-01 01:53:12
【问题描述】：

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

一个例子： 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;
}

<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>

【问题讨论】：

标签： javascript jquery css css-transitions

【解决方案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;
}

<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>

【讨论】：