CSS转换何时实际设置？

Question

我正在使用CSS转换制作一个简单的滑块。 它就像

一样

1. 将下一张幻灯片翻译为100％
2. 将转换添加到当前和下一个
3. 转换为0，当前幻灯片转换为-100％
4. 删除过渡。

问题是下一张幻灯片永远不会被翻译。它似乎在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

解决方案是在下次翻译之前强制重排。

-fx-focus-color

感谢这个问题