Question

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

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

现在我的小提琴无法正常工作： http://jsfiddle.net/me8ukkLe/12/

这是我的代码：

＆＃13;

$('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');
    });

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

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

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

1 个答案: