如何在 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屬性。有足夠的內容覆蓋現有樣式的權重。所有瀏覽器都支援。

以上是如何在 DOM 操作期間暫時停用 CSS 轉換？的詳細內容。更多資訊請關注PHP中文網其他相關文章！