為什麼我的 CSS 轉換沒有從 JavaScript 觸發？

CSS 過渡不是從 JavaScript 觸發

透過 JavaScript 將 CSS3 過渡應用到元素時，了解過渡激活的機制至關重要。為了使過渡有效，必須遵循三個基本步驟：

1.定義可轉換屬性：
確保元素具有明確指定的可轉換屬性。在這種情況下，不透明度應設定為不透明度：0.

2。指定過渡效果：
使用transition屬性定義過渡效果，例如transition: opacity 2s。

3。更新可轉換屬性：
要觸發轉換，必須更新可轉換屬性，例如不透明度：1。

解決 JavaScript 轉換問題：
根據提供的程式碼範例，出現問題的原因是瀏覽器無法在透過 JavaScript 指派屬性時立即處理屬性變更。要解決此問題，需要延遲以允許瀏覽器在應用可轉換屬性之前處理請求。一種解決方案是使用 window.setTimeout 函數將 target-fadein 類別的分配延遲 100 毫秒。

或者，您可以直接將 target-fadein-begin 類別新增至 HTML 中，這將是在頁面載入時進行解析並確保在需要時準備好轉換。請記住，向元素添加過渡屬性不會觸發動畫；而是會觸發動畫。設定可轉換屬性即可。

以上是為什麼我的 CSS 轉換沒有從 JavaScript 觸發？的詳細內容。更多資訊請關注PHP中文網其他相關文章！