javascript - 强制浏览器在更改 CSS 时触发重排

Question

我正在构建基于 CSS3 转换的非 jQuery 响应式图像 slider 。

结构很简单:一个视口(viewport)和内部相对定位的 UL 以及左浮动的 LI。

在这种情况下我遇到了一个问题:

1. 用户点击“上一个”箭头。
2. JS 在当前显示的 LI 节点之前附加适当的 LI。
3. 目前 UL 已将 CSS 转换设置为 none 0s linear 以防止动画更改。此刻，我将 UL CSS 左值减小了 slider 宽度(比方说:从 0 像素到 -1200 像素)，使 View 与原来一样。
4. 现在我将 UL 的过渡属性更改为all 0.2s ease-out。
5. 现在我正在更改 UL 的左属性以触发 CSS3 动画。 (比方说:从 -1200 像素到 0 像素)。

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

Stoyan Stefanov 在他的博客中写了回流问题 here , 但在这种情况下，试图强制对元素进行重排是行不通的。

这是执行此操作的一段代码(为了简化，我跳过了浏览器前缀):

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

这是 fiddle ，可以看到实际问题:http://jsfiddle.net/9WX5b/1/

Answer 1

请求元素的 offsetHeight 一切都很好。您可以使用此函数强制重排并将样式已更改的元素传递给它:

function reflow(elt){
    console.log(elt.offsetHeight);
}

并在需要回流的地方调用它。请参阅此示例:http://jsfiddle.net/9WX5b/2/

编辑:最近需要这样做，并且想知道是否有比 console.log 更好的方法。您不能只将 elt.offsetHeight 写成它自己的语句，因为优化器(至少 Chrome 的)不会触发回流，因为它只是访问没有设置 getter 的属性，不需要甚至评价它。所以，据我所知，最便宜的方法是 void(elt.offsetHeight)，因为它不确定 void 是否有副作用。 (可能会被覆盖或其他什么，idk)。