如何在 JavaScript 中有效地禁用和重新启用 CSS 转换？

禁用和重新启用 CSS 转换

在典型的 Web 应用程序中，DOM 元素可能会受到各种 CSS 转换的影响。但是，在某些情况下，您可能需要在某些操作期间暂时禁用这些效果，例如调整元素大小。

优雅禁用和重新启用

优雅地禁用和重新启用 CSS 过渡，您可以结合使用 CSS 和 JavaScript。

CSS类：

创建一个“notransition”CSS 类来覆盖元素的过渡属性：

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

JavaScript：

没有jQuery:

const someElement = document.getElementById("some-element");

// Disable transitions
someElement.classList.add('notransition');

// Perform CSS changes
doWhateverCssChangesYouWant(someElement);

// Trigger a reflow
someElement.offsetHeight;

// Re-enable transitions
someElement.classList.remove('notransition');

使用 jQuery:

const $someElement = $('#some-element');

// Disable transitions
$someElement.addClass('notransition');

// Perform CSS changes
doWhateverCssChangesYouWant($someElement);

// Trigger a reflow
$someElement[0].offsetHeight;

// Re-enable transitions
$someElement.removeClass('notransition');

说明：

1. 添加要禁用的“notransition”类过渡。
2. 将任何所需的 CSS 更改应用于元素。
3. 通过读取元素的 offsetHeight 属性触发强制回流。
4. 删除“notransition”类以重新启用过渡。

以上是如何在 JavaScript 中有效地禁用和重新启用 CSS 转换？的详细内容。更多信息请关注PHP中文网其他相关文章！