Search code examples
javascriptcssgoogle-chromewebkit-transition

Transition starts too early, while css style hasn't applied completely yet

My code is here. There are three position:zero(0,0),end(200,200),random(0,200).

A div is in the position random(0,200) at the beginning.

I want to :

step 1) set the div in the position zero(0,0). this step no animation

step 2) move it from position zero to position end by transition. this step has animation

Code like this does't work very well:

document.getElementById('x').className = 'pos_zero';    // set the div to the position zero(0,0)
move(); 
// in function move: 
// document.getElementById('x').className = ' trans'; 
// document.getElementById('x').className += ' pos_end' ;

It seems that transition starts too early, while css style(className = 'pos_zero') hasn't applied completely yet. It just directly moves from position random to position end. And what I really want is the animation to position end from position zero, not from random.

Code like this works:

document.getElementById('x').className = 'pos_zero';    // set the div to the position zero(0,0)    
setTimeout('move()',1);

This code do successfully by using a timeout function. This code sets the div in the position pos_zero first and then do transition asynchronously by a timeout function. And the timeout function seems not very professional.

So, I'm looking for a more professional solution.

By the way. I wonder. If there is any way to ensure the style is applied completely, like "Style.flush()" or something?

@Inerdial It does work!Many thanks.To force an update (to force an immediate, synchronous reflow or relayout), your javascript should read a property that's affected by the change, e.g. the location of someSpan and otherSpan.` The new code works without Timeout.

document.getElementById('x').className = 'pos_zero';
var tmp = document.getElementById('x').offsetTop; // read a property to force an update.
move();

Thank you guys all. And sorry for the confusing made by me.

Solution

  • Thanks to @Inerdial. It does work!. Actually this answer is coming from his comment.

    To force an update (to force an immediate, synchronous reflow or relayout), your javascript should read a property that's affected by the change, e.g. the location of someSpan and otherSpan.` - stackoverflow.com/a/1397505/41655

    The new code works without Timeout(jsfiddle.net/vd6V8):

    document.getElementById('x').className = 'pos_zero';
var tmp = document.getElementById('x').offsetTop; // read a property to force an update.
move();

    Thank you guys all. And sorry for the confusing made by me.