Force CSS transition to update multiple times in JavaScript function

Question

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>

Dusty · Accepted Answer · 2015-11-30 17:53:12Z

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>

Collectives™ on Stack Overflow

Force CSS transition to update multiple times in JavaScript function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related