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

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