為什麼透過 JavaScript 應用 CSS 轉換會失敗？

修復透過JavaScript 分配時的CSS 過渡

嘗試透過JavaScript 應用CSS3 過渡時，可能會遇到指定過渡失敗的情況儘管應用了正確的樣式，但仍要執行。這種行為可能會令人費解，特別是當直接透過瀏覽器的檢查器應用過渡時。

根本原因

要完全理解這個問題，必須了解CSS 過渡機制。要使過渡生效，必須執行三個關鍵步驟：

1. 目標元素必須明確定義過渡屬性（例如，transition: opacity 2s;）。
2. 元素必須具有過渡屬性集的初始值（例如，不透明度：0；）。
3. 必須套用過渡屬性的新值（例如，不透明度：1；）。

當 JavaScript 動態分配類別時（如提供的範例所示），存在潛在問題。瀏覽器需要時間來處理這些更改，並且動態分配目標類別（例如“.target-fadein”）可能無法提供必要的延遲。

解

為了解決這個問題，在分配目標類別之前需要延遲。這確保了瀏覽器有足夠的時間來應用過渡屬性並準備動畫。以下程式碼片段說明了應用目標類別時延遲的使用：

window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);

或者，您可以直接將目標類別「.target-fadein-begin」新增至HTML 中，以便解析它載入並準備好過渡。

其他見解

重要的是要認識到，簡單地向元素添加過渡不會觸發動畫。實際的動畫是透過更改過渡屬性的值來觸發的。這解釋了為什麼在檢查器中手動設定初始和新屬性值有效。

為了進一步說明，請考慮以下程式碼片段：

// Works
document.getElementById('fade1').className += ' fade-in'

// Doesn't work
document.getElementById('fade2').className = 'fadeable'
document.getElementById('fade2').className += ' fade-in'

// Works
document.getElementById('fade3').className = 'fadeable'

window.setTimeout(function() {
  document.getElementById('fade3').className += ' fade-in'
}, 50)

在這種情況下，第一個區塊起作用是因為過渡的所有三個條件均已滿足。此元素定義了一個過渡，初始不透明度設為 0，新的不透明度設為 1。第二個區塊失敗，因為在應用過渡類別之前未明確定義初始不透明度值。第三個區塊之所以有效，是因為延遲允許瀏覽器在應用轉換之前處理初始值設定。

以上是為什麼透過 JavaScript 應用 CSS 轉換會失敗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！