When does CSS transform actually get set?

Question

I am making a simple slider using CSS transform. It works like

1. Translate next slide to 100%
2. Add transitions to current and next
3. Translate next to 0, current slide to -100%
4. Remove transitions.

The problem is that next slide never gets translated. It seems to work fine in Chrome but not Firefox. My question is, how long it takes for browsers to really set the transform?

var curSlide = slides[index].style;
var nextSlide = slides[index + 1].style;

nextSlide['transform'] = 'translateX(100%)'; // never occurs

//Giv it some time ??? How long ???
setTimeout(function(){

    nextSlide['transition'] = 'transform 0.2s'; 
    curSlide['transition'] = 'transform 0.2s'; 

    nextSlide['transform'] = 'translateX(0)';
    curSlide['transform'] = 'translateX(-100%)';

},0);// if timeout is set to 100ms it works fine

Answer 1

Solution was to force a reflow before next translation.

console.log(elementTranslated.offsetHeight);

Thanks to this question Force browser to trigger reflow while changing CSS