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

CSS 過渡最初在隱藏元素上不起作用

嘗試使用CSS 過渡對隱藏元素的屬性進行動畫處理時，您可能會遇到元素立即顯示在其最終位置的問題。這是由於 CSS 物件模型 (CSSOM) 和文件物件模型 (DOM) 之間的關係所造成的。

Reflow 和 CSSOM 的作用

CSS 過渡決定它們的初始狀態是基於元素的計算樣式。但是，當元素具有 display: none 時，瀏覽器會忽略其計算樣式，因為該元素實際上對 CSSOM 不可見。

在您的場景中，當您觸發 .b 上的轉換時，它沒有計算樣式，因為它是隱藏的。因此，過渡無法正確初始化。

強制回流

要解決此問題，您可以在啟動之前強制瀏覽器更新隱藏元素的計算樣式過渡。這是透過觸發重排來完成的。

重排是瀏覽器重新計算整個頁面的佈局和計算樣式的過程。這可以在必要時由某些 DOM 方法或瀏覽器本身觸發，例如當螢幕刷新時。

使用 requestAnimationFrame() API，您可以要求瀏覽器在下次繪製之前執行重排發生操作。這可確保過渡開始時元素的計算樣式是最新的。

更新的程式碼

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

  requestAnimationFrame(() => {
    // Force a reflow
    document.body.offsetHeight;

    // Trigger the transitions
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
})

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