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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

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

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

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

以上是 强制浏览器在更改CSS时触发重排 的全部内容， 来源链接： utcz.com/qa/417031.html

回到顶部