我正在基于CSS3过渡构建非jQuery响应式图像滑块。

结构很简单：一个视口和内部相对定位的UL，左侧浮动LI。

在这种情况下，我面临一个问题：

1. 用户单击“上一个”箭头。
2. JS在当前显示的LI节点之前附加适当的LI。
3. 目前，UL已将CSS过渡设置为none 0s linear防止动画更改。此时，我将UL CSS左值减小滑块宽度（比方说：从0px到-1200px），以使视图保持原样。
4. 现在，我将UL的过渡属性更改为all 0.2s ease-out。
5. 现在，我将更改UL的left属性以触发CSS3动画。（比方说：从-1200px到0px）。

问题是什么？浏览器简化了更改，并且不制作任何动画。

Stoyan Stefanov在他的博客上写了有关重排问题的信息，但是在这种情况下，试图对元素强制重排是行不通的。

这是执行此操作的一段代码（为简化起见，我跳过了浏览器前缀）：

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