小编典典

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

html

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


阅读 543

收藏
2020-05-10

共1个答案

小编典典

请求offsetHeight一个元素的效果很好。您可以使用此功能强制重排,并将样式已更改的元素传递给它:

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

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

2020-05-10