為什麼我的 JavaScript 指定的 CSS 轉換不起作用？

JavaScript 指定的CSS 過渡不起作用

透過JavaScript 將CSS3 過渡應用到幻燈片時，您可能會遇到一個令人費解的問題，其中指定儘管應用了正確的樣式，但過渡仍無法正常工作。造成這種差異的原因是 CSS 轉換僅在指定屬性變更值時觸發，而不是在最初定義轉換時觸發。

要解決此問題，請確保滿足以下三個條件：

1. 屬性明確定義：受影響的元素必須在其初始樣式中顯式聲明屬性。
2. 過渡定義：元素必須定義所需的過渡，如「transition: opacity 2s;」。
3. 屬性值變更：定義transition後，設定新的屬性值，觸發動畫。

在您的範例中，過渡不起作用，因為屬性值變更（設定「opacity：1」）發生在瀏覽器有機會處理動態分配的過渡之前。要解決此問題，請在分配“target-fadein”類別之前引入延遲：

或者，直接在HTML 中包含“target-fadein-begin”類，允許在加載時對其進行解析並準備好過渡。

請記住，過渡本身的 JavaScript 分配不會啟動動畫；正是屬性值的變化觸發了過渡效果。

以上是為什麼我的 JavaScript 指定的 CSS 轉換不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！