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 回答