為什麼 CSS 過渡對最初隱藏的元素不起作用？

CSS 過渡不適用於最初隱藏的元素

當元素最初使用CSS 的顯示隱藏時：無，任何應用於該元素的CSS 過渡當其可見性改變時不會觸發。這是因為 CSS 轉換依賴於元素的初始計算樣式，對於隱藏元素，該樣式將為空。

CSSOM 與 DOM

要了解此行為，區分 CSS 物件模型 (CSSOM) 和文件物件模型 (DOM) 很重要。 DOM 表示 HTML 文件的層次結構，而 CSSOM 包含每個元素的計算樣式。

回流和繪製

當元素的可見性為更改後，瀏覽器需要更新 CSSOM 並重排頁面以反映變更。回流會根據元素的 CSS 規則重新計算元素的計算樣式和位置。繪製是在螢幕上渲染頁面的過程，發生在重排之後。

過渡啟動

CSS 過渡透過在元素的初始計算樣式與其元素之間進行插值來工作最終風格。當元素最初隱藏時，其計算樣式將為空，因此轉換演算法無法建立初始狀態。

解決方案：強制回流

來觸發轉換對於隱藏元素，需要在更改其可見性後強制回流。這可以使用 requestAnimationFrame API 來實現，該 API 在瀏覽器繪製頁面之前執行回呼。

透過使用 requestAnimationFrame，可以在瀏覽器更新 CSSOM 後套用 CSS 過渡，從而允許過渡正確啟動。

範例

這是程式碼的修改版本使用requestAnimationFrame 強制回流：

$('button').on('click', function() {
  $('.b').show();

  requestAnimationFrame(() => {
    document.body.offsetHeight; // Force a reflow
    $('.b').css('right', '80%');  // Trigger the transition
    $('.a').css('right', '80%');
  });
});

總之，CSS 過渡不適用於最初隱藏的元素，因為CSSOM 不包含它們的初始計算樣式。要觸發轉換，需要在更改元素的可見性後強制回流。

以上是為什麼 CSS 過渡對最初隱藏的元素不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！