CSS 변환은 실제로 언제 설정됩니까?

Question

CSS 변환을 사용하여 간단한 슬라이더를 만들고 있습니다.

1. 100 %로 다음 슬라이드를 번역처럼 그것은
2. 0 옆에 번역 현재와 다음
3. 에 전환 효과를 추가 작동
4. 가 전환을 제거 -100 %로 현재 슬라이드.

다음 슬라이드는 번역되지 않습니다. Chrome에서는 제대로 작동하지만 Firefox에서는 제대로 작동하지 않는 것 같습니다. 내 질문은 브라우저가 변환을 실제로 설정하는 데 얼마나 걸리나요?

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

해결책은 다음 번 번역 전에 리플 로우를 강제하는 것이 었습니다. 이 질문에 Force browser to trigger reflow while changing CSS

에

console.log(elementTranslated.offsetHeight); 

감사합니다