為什麼 CSS 轉場不適用於隱藏元素？

CSS 轉換不會觸發隱藏元素

在 Web 開發中，通常使用 CSS 轉場來對元素屬性的變更進行動畫處理。然而，一個常見的障礙是當一個元素最初被隱藏（例如，使用 display: none），然後變得可見，但 CSS 過渡沒有激活。

CSSOM 和的幕後花絮DOM

要理解這種行為，我們需要考慮CSS 物件模型(CSSOM) 與文件物件模型之間的關係（DOM） 。 DOM 表示頁面的 HTML 結構，而 CSSOM 表示每個元素的計算樣式。

在渲染過程中，首先發生 DOM 操作（例如，更改顯示屬性）。然後，瀏覽器會重新計算頁面上所有元素的計算樣式 (CSSOM)，稱為回流或佈局。最後，這些變化會以視覺方式呈現在螢幕上（繪畫）。

對 CSS 轉換的影響

CSS 轉場需要元素的初始計算樣式來計算開始狀態。但是，對於隱藏元素，計算出的樣式本質上為空，因為它們不會顯示。這意味著當觸發轉換時，初始狀態對於任何可轉換值都無效。

解決方案

要解決此問題，您可以使用以下方法之一：

• 強制回流：使用requestAnimationFrame 或其他方法觸發回流會強制瀏覽器重新計算計算的樣式。透過在觸發轉換之前呼叫回流，您可以確保計算的樣式是最新的。
• 在內部使用 $.animate()**: .animate()透過觸發 DOM 操作然後調度回調來觸發轉換來強制回流。但是，這種方法通常比使用直接回流方法慢。

範例

以下程式碼片段示範如何使用requestAnimationFrame 強制回流：

$('button').on('click', function() {
  $('.b').show(); // Show the hidden element

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

透過使用requestrequestrequestrefrequest]能夠成功觸發，即使是最初隱藏的元素。

以上是為什麼 CSS 轉場不適用於隱藏元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！