如何强制浏览器重排 CSS 转换：有效动画指南

CSS 转换中的浏览器回流问题

使用 CSS3 转换 DOM 元素时，通常需要强制浏览器回流来触发动画。如果按顺序修改多个 CSS 属性导致意外行为，浏览器可能会优化更改，从而导致动画缺失。

要解决此问题，必须了解回流的概念。当浏览器重新计算文档树的一部分的布局时，就会发生重排，这是由块级元素的大小或位置的更改触发的。

强制重排的一种技术涉及访问 offsetHeight 属性修改样式后的元素。这可以通过以下函数来完成：

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

通过在更新元素的 CSS 后调用此函数，可以触发回流，从而使转换生效。以下是使用此技术的问题代码的修改示例：

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

另一个选项是使用 void() 运算符，它可以防止优化器跳过属性访问：

void(elt.offsetHeight);

此技术非常有效，因为 void 是一个一元运算符，它计算表达式，然后丢弃其结果，确保执行访问属性的任何副作用。

以上是如何强制浏览器重排 CSS 转换：有效动画指南的详细内容。更多信息请关注PHP中文网其他相关文章！