如何在 JavaScript 中可靠地停用 CSS 轉換？

克服 CSS 轉場的挑戰

在 Web 開發領域，暫時停用 CSS 轉場效果可能會帶來挑戰。雖然簡單地切換 CSS 類別似乎很簡單，但由於瀏覽器優化，這種方法常常存在不足之處。

解決方案：無過渡類別和強制回流

要有效停用過渡，可以使用 CSS 類別使用 !important 標誌將所有過渡屬性設為 none。然而，這個類だけでは、期待した動作は得られません。

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

技巧在於修改元素的CSS屬性後強制元素回流。此刷新會刷新待處理的 CSS 更改，確保已停用轉換。一種可靠的方法是存取元素的 offsetHeight 屬性。

JavaScript 實作

不使用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

使用jQuery:

注意事項

確保!important 足以覆蓋現有樣式。如果沒有，請考慮使用 element.style.setProperty 手動停用和重新啟用轉換。供應商前綴可以省略，因為大多數現代瀏覽器都支援沒有它們的轉換。

以上是如何在 JavaScript 中可靠地停用 CSS 轉換？的詳細內容。更多資訊請關注PHP中文網其他相關文章！