32

我正在构建基于 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';

这是查看实际问题的小提琴：http: //jsfiddle.net/9WX5b/1/

4

2 回答 2

34

请求offsetHeight一个元素可以很好地完成所有事情。您可以使用此函数强制重排，并将样式已更改的元素传递给它：

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

并在需要回流的地方调用它。看这个例子：http: //jsfiddle.net/9WX5b/2/

编辑：最近需要这样做，并想知道是否有比 console.log 更好的方法。你不能只写elt.offsetHeight它自己的语句，因为优化器（至少是 Chrome 的）不会触发重排，因为它只是访问一个没有设置 getter 的属性，甚至不需要评估它。所以，AFAIK 最便宜的方法是void(elt.offsetHeight)，因为它不确定是否void有副作用。（可以被覆盖或其他东西，idk）。

于 2014-02-09T21:14:35.003 回答
6 
function reflow( element ) {
    if ( element === undefined ) {
        element = document.documentElement;
    }
    void( element.offsetHeight );
}

它适用于 Chrome 和 FF，并且似乎是最简单、最便携的 ATM 方式。

于 2017-07-18T18:41:47.903 回答