首頁 >web前端 >css教學 >為什麼當顯示設定為「無」時 CSS3 過渡不起作用?

為什麼當顯示設定為「無」時 CSS3 過渡不起作用?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-08 08:19:01987瀏覽

Why Do CSS3 Transitions Not Work When Display Is Set To None?

CSS3 過渡不適用於Display 屬性

在CSS 中,display 屬性在定義元素是否可見或隱藏方面起著至關重要的作用。另一方面,過渡可以隨著時間的推移而實現平滑的視覺變化。但是,嘗試將過渡應用於顯示設為無的元素可能會導致意外行為。

解決問題

問題源自於顯示的性質財產。當元素的顯示設為無時,它將從頁面中刪除,就好像它從未存在過一樣。因此,它無法部分顯示或進行過渡。

替代解決方案:使用不透明度

要在懸停時實現所需的淡入淡出效果,請考慮使用不透明度屬性。 Opacity 控制元素的透明度,使其逐漸出現或消失。

CSS 解決方案

實現以下CSS 調整以啟用淡入淡出效果:

#header #button:hover > .content {
    opacity: 1;
    height: 150px;
    padding: 8px;
}

#header #button .content {
    opacity: 0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}

透過結合不透明度和過渡,當滑鼠懸空停在按鈕上時,隱藏的內容會淡入視圖。為了簡潔起見,省略了跨瀏覽器相容性的供應商前綴。

其他注意事項

除了不透明度之外,還可以探索調整高度和填充屬性以實現類似的效果效果。

附加資源

  • [CSS 過渡教學](https://www.w3schools.com/css/css3_transitions.asp)
  • [使用CSS 處理隱藏元素過渡](https://css-tricks.com/transitions-with-hidden-elements/)
  • [Stack Overflow 上的類似主題](https://stackoverflow. com/questions/30130725/css-顯示無時動畫不可見)

以上是為什麼當顯示設定為「無」時 CSS3 過渡不起作用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn