如何在 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：

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

使用jQuery:

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

说明：

1. 应用 '.notransition' 类：此类将禁用转换通过覆盖 CSS 过渡效果属性。
2. 执行所需的 CSS 更改：根据需要更改高度或其他 CSS 属性，并禁用过渡。
3. 触发回流：读取元素的 offsetHeight 属性强制回流并刷新待处理的 CSS 更改。
4. 撤消class：触发回流后，删除“.notransition”类以恢复过渡。

此方法可确保 CSS 过渡在调整大小过程中正常禁用并重新启用，从而允许流畅无缝的动画。

以上是如何在 DOM 元素调整大小期间优雅地禁用 CSS 转换以实现流畅的动画？的详细内容。更多信息请关注PHP中文网其他相关文章！