强制CSS转换以在JavaScript函数中更新多次 [英] Force CSS transition to update multiple times in JavaScript function

问题描述

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

它的工作示例：
< a href =http://jsfiddle.net/j8x0dzbz/8/ =nofollow> 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 rightCLASS $（'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>    
 
解决方案
由于转换属性位于 $（'div div'）对象，它正在执行转换，但是 left_zero 类很快添加，有机会转换到右类坐标。对于这个例子，最好的做法是将 transition 属性放在 left_zero 类上。
 
 
 
 
 
 
  $（'button'）click（function（）{$（'div div'）。eq（0）.addClass（'right'）; getComputedStyle（document.getElementById（'blue'））。left; // FORCErightCLASS 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>   
 
I know how to get CSS transitions to work, but in this case I want to know why getComputedStyle() won't update the right class. Here's a reference to use the getComputedStyle() method to force style recalculation: jQuery addClass method chaining to perform CSS transitions

An example of it working:
http://jsfiddle.net/j8x0dzbz/8/

Now here's my fiddle of it not working:
http://jsfiddle.net/me8ukkLe/12/

And here's my code:



$('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>



解决方案
Since the transition property is on the $('div div') object, it is performing the transition, but the left_zero class is added so quickly that the element never gets a chance to transition to the right class coordinates. For this example the best thing to do is put the transition property on the left_zero class.



$('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函数中更新多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！