如何在 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. 說明：
2. 說明🎜>應用'.notransition'類別：此類將禁用轉換透過覆寫 CSS 過渡效果屬性。
3. 執行所需的 CSS 變更：根據需要變更高度或其他 CSS 屬性，並停用轉場。
4. 觸發回流：讀取元素的 offsetHeight 屬性強制回流並刷新待處理的 CSS 變更。

撤銷class

：觸發回流後，刪除「.notransition」類別以恢復過渡。

此方法可確保 CSS 轉換在調整大小過程中正常停用並重新啟用，從而允許流暢無縫的動畫。

以上是如何在 DOM 元素調整大小期間優雅地停用 CSS 轉換以實現流暢的動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！