[筆記] HTML height:0 到 height: auto 的動畫效果實現

近期在 HTML 開發上,要製作展開的動畫效果,一般而言是使用 height: 0 到 height: 80px 之類的特定高度。若遇上展開所需的高度會需要為動態值的狀態下,那要怎麼實現呢?這邊筆記下實現方法。
html logo


內容

本質上是運用父層的 <div> 上設定 max-height: 0 和動畫 transition 效果 ( 也就是綁定 max-height )。當你父層因內容加入並設定為 height: auto 以及 max-height 為一個特定值時,動畫效果就可以保持。


程式碼


參考連結

1. How can I transition height: 0; to height: auto; using CSS?

按讚加入粉絲團

延伸閱讀