我正在基于CSS3转换构建非jQuery响应的图像滑块。
结构很简单：一个视口和内部相对定位的UL，带有左浮动的LI。
在这种情况下，我面临着一个问题：
- 用户单击"prev"箭头
- JS在当前显示的li节点之前附加适当的li
- 目前，UL已将CSS转换设置为
none 0s linear，以防止动画更改。此时此刻，我将UL CSS左值减小滑块宽度(比如说：从0px到-1200px)，使视图保持原样 - 现在我将UL的转换属性更改为
all 0.2s ease-out - 现在我正在更改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';
以下是实际操作中的问题：http://jsfiddle.net/9WX5b/1/
请求元素的offsetHeight可以很好地完成所有操作。您可以使用此函数强制回流，并将样式已更改的元素传递给它：
function reflow(elt){
console.log(elt.offsetHeight);
}
在需要回流的地方称之为回流。请参见此示例：http://jsfiddle.net/9WX5b/2/
EDIT：最近需要这样做，想知道是否有比console.log更好的方法。你不能只把elt.offsetHeight写为它自己的语句，因为优化器(至少是Chrome的)不会触发回流，因为它只是访问一个没有getter集的属性，甚至不需要评估它。所以，AFAIK最便宜的方法是void(elt.offsetHeight)，因为它不能确定CCD_ 10是否具有副作用。(可能被覆盖或其他什么，idk)。
function reflow( element ) {
if ( element === undefined ) {
element = document.documentElement;
}
void( element.offsetHeight );
}
它可以与Chrome和FF配合使用，似乎是ATM最简单、最便携的方式。