如何暫時停用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中文網其他相關文章！
