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中文網其他相關文章!