首頁 > web前端 > css教學 > 為什麼我的 CSS 轉換沒有從 JavaScript 觸發?

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

Susan Sarandon
發布: 2024-10-29 08:57:30
原創
739 人瀏覽過

Why Aren't My CSS Transitions Triggering From 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板