如何在 DOM 操作期间暂时禁用 CSS 转换？

如何暂时禁用 CSS 过渡效果

使用应用了 CSS 过渡的 DOM 元素时，在某些情况下您可能需要暂时禁用这些效果以平滑调整大小。本文探讨了实现此目的的最优雅的解决方案。

禁用过渡

要有效禁用 CSS 过渡，您可以创建一个“notransition”类，如下所示：

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

实施JavaScript

使用 JavaScript 应用“notransition”类有两种方法：

不使用 jQuery：

someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions

与jQuery:

$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow, flushing the CSS changes
$someElement.removeClass('notransition'); // Re-enable transitions

说明

禁用转换的问题是浏览器会缓冲样式更改，直到 JavaScript 执行完成并将它们应用到单个“回流”中”。这可能会导致出现不需要的动画。要强制回流并刷新 CSS 更改，您需要读取元素的 offsetHeight 属性。

附加说明

• 确保 '!important' 有足够的内容覆盖现有样式的权重。
• 考虑浏览器的供应商前缀属性兼容性。
• 此解决方案适用于支持过渡的浏览器，但请记住并非所有浏览器都支持。

以上是如何在 DOM 操作期间暂时禁用 CSS 转换？的详细内容。更多信息请关注PHP中文网其他相关文章！