首頁 > web前端 > css教學 > 如何防止 Chrome 中頁面載入時觸發 CSS 轉換?

如何防止 Chrome 中頁面載入時觸發 CSS 轉換?

Mary-Kate Olsen
發布: 2024-10-31 20:20:02
原創
536 人瀏覽過

How to Prevent CSS Transitions from Triggering on Page Load in Chrome?

在頁面加載時抑制CSS 過渡啟動

在某些情況下,CSS 過渡可能會在頁面加載期間無意中激活,導致元素閃爍。在元素上應用顏色過渡時可能會出現此問題。

根據提供的範例:

CSS:

p.green {
   color: green;
   transition: color .2s;
}

p.green:hover {
   color: yellow;
}
登入後複製
HTML:

<p class="green">The Flashing Text</p>
登入後複製

頁面載入時,

中的文字將顯示為

<script> </script>
登入後複製
元素從黑色(初始顏色)過渡到綠色。這種行為是不需要的,並且可能會造成視覺破壞。

為了防止這種意外的轉換,解決方案涉及利用 Chrome 行為的獨特方面。當頁麵包含
時元素,Chrome 過早觸發 CSS 轉換。透過在腳本標籤中添加單空格字符,可以模擬該元素的存在,從而抑制錯誤的轉換:這個簡單的解決方法透過提供空白 解決了 Chrome 中的錯誤。表格>元素,防止在頁面載入期間不必要地啟動轉換。

以上是如何防止 Chrome 中頁面載入時觸發 CSS 轉換?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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