為什麼最初隱藏時元素轉換會失敗？

最初隱藏時元素轉換失敗

場景概述

考慮兩個元素，標記為' A' 和'B'，其中'B' 最初使用display: none 隱藏。當透過 $.show() 或 $.toggle() 等方法使用過渡來為「B」設定動畫時，該元素會立即出現在其最終位置，而無需任何動畫。

說明

根本原因在於文件物件模型（DOM）和CSS物件模型（CSSOM）之間的關係。 CSS 轉換依賴於元素的最後計算值。對於最初隱藏的元素，計算值是 display: none，這實際上是從 CSSOM 中刪除元素。

DOM 操作和回流

DOM 操作階段涉及更新JavaScript 對象，這是一個非同步過程。相較之下，重排階段僅在必要時才會發生，該階段會更新 CSS 規則並重新計算計算樣式。由於最初隱藏的元素沒有計算樣式，因此它們在 DOM 操作期間不會觸發回流。

轉換初始狀態

因此，當 ' 的轉換時B'開始，初始狀態未定義，因為回流尚未發生。這可能會導致不正確的轉換。

強制重排

要解決此問題，您可以在觸發轉換之前強制重排。您可以使用 Element.getBoundingClientRect() 或 element.offsetHeight 來實現此目的，這需要最新的計算值，因此強制回流。

強制回流的改進範例

這是一個修改後的程式碼片段，在動畫轉換之前強制回流：

$('button').on('click', function() {
  $('.b').show(); // apply display:block synchronously

  requestAnimationFrame(() => { // wait just before the next paint
    document.body.offsetHeight; // force a reflow
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
});

透過在動畫轉換之前強制回流：

透過在觸發轉換之前強制回流，您可以確保計算值是最新的，允許過渡正常工作。

以上是為什麼最初隱藏時元素轉換會失敗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！