為什麼我的 CSS 轉換在透過 JavaScript 應用程式時不起作用？

透過 JavaScript 分配時未套用 CSS 轉換

儘管使用 JavaScript 應用 CSS3 轉換，但它們無法如預期運作。當動態指派包含過渡屬性的 CSS 類別時，就會出現此問題。

要有效觸發過渡，先決條件是：

• 屬性的明確定義（例如，不透明度：0；）
• 定義的過渡（例如， transition: opacity 2s;）
• 設定新屬性（例如，opacity: 1;）

在JavaScript 中，問題源自於瀏覽器的處理時間。必須先套用正確的樣式，然後稍微延遲一下，然後再設定負責轉換的 CSS 類別。此延遲允許瀏覽器在應用程式過渡之前註冊應用程式的樣式。

要實現此延遲，請使用window.setTimeout() 延遲添加包含過渡的CSS 類別：

<code class="js">window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);</code>

或者，在載入時在HTML 中包含一個轉換觸發類別(target -fadein-begin)：

<code class="html"><div class="fadeable target-fadein-begin"></div></code>

透過滿足這些條件，透過JavaScript 觸發的CSS 轉換可以按預期運行，從而允許無縫動畫。

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