Launch a browser to activate payment when CSS changes.

Question

I am creating a non-jQuery responsive CSS3 transition image slider.

The structure is simple: a viewport and inside a relatively positioned UL with left floating LI.

In this situation, I ran into a problem:

• The user presses the button "previous" arrow.
• JS adds the correct LI before displaying the currently LI node.
• UL has now set the CSS transition as none 0s linear to prevent animation changes. At this point, I decrease the left CSS CSS value across the width of the slider (say: from 0px to -1200px) to do the same as it was.
• Now I am changing the UL transition property to all 0.2s ease-out .
• Now I am changing the UL left property to trigger the CSS3 animation. (say: -1200px to 0px).

What is the problem? The browser simplifies changes and does not make animations.

Stoyan Stefanov wrote about the problem of reflection on his blog here , but in this case the attempt to force reflection of the element does not work.

This is the part of the code that does this (I skipped browser prefixes for simplification):

ul.style.transition = 'none 0s linear 0s'; ul.style.left = '-600px'; ul.style.transition = 'all 0.2s ease-out'; ul.style.left = '0px';

Here you can see the problem in action: http://jsfiddle.net/9WX5b/1/

Answer 1

Requesting an element's offsetHeight element does all right. You can force the payment using this function and pass it the element in which the styles were changed:

 function reflow(elt){ console.log(elt.offsetHeight); } 

And call it when reflection is needed. See this example: http://jsfiddle.net/9WX5b/2/

EDIT: I had to do this recently, and wondered if there is a better way than console.log. You can’t just write elt.offsetHeight as your own statement, since the optimizer (at least Chrome) will not cause a redevelopment, because it just gets access to the property without a set of getters, you don’t even need to evaluate it. So AFAIK is the cheapest way to do this: void(elt.offsetHeight) , since it doesn’t know exactly if void side effects or not. (may be overridden or something, idk).

Answer 2

 function reflow( element ) { if ( element === undefined ) { element = document.documentElement; } void( element.offsetHeight ); } 

It works fine with Chrome and FF and seems to be the easiest and most portable way for this ATM.