為什麼當我更改顯示屬性時我的 CSS3 轉換失敗？

CSS3 過渡不適用於Display 屬性

問題：

為什麼CSS3 過渡在顯示屬性時無法正常工作在顯示屬性時無法正常運作修改了嗎？

答案：

當顯示屬性設定為「none」時，整個區塊元素被有效隱藏，防止任何過渡效果。或者，使用不透明度可以實現淡入淡出效果和更平滑的過渡。

替代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;
}

工作示範：

[Fiddle](https://jsfiddle.net/alexdocker/KAyvL/)

附加說明：

• 附加說明：
• 為簡潔起見，省略了供應商前綴。

您也可以考慮調整邊框半徑以創建更微妙的過渡效果。 請參閱此[SO討論](https://stackoverflow.com/questions/13691003/displaynone-css3-transition)以獲取類似的見解。

以上是為什麼當我更改顯示屬性時我的 CSS3 轉換失敗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！