【CSS】height transition

説明

CSS展開動畫:點選收起來的選單→觸發動作開啓選單

開啓狀態下的選單區塊,高度寫inherit的話,無法完成動態效果,所以要用max-height的方式完成

.outer 收合的選單 (hover me)
 .inner
  p 選單内部
  p 選單内部
  p 選單内部
.outer
  background-color: #E7F2F1
  display: inline-block
  padding: 10px
  &:hover
   .inner
   max-height: 150px
   //不用精準設定到元素高度,元素只會展開到他自己的高度。數字可以抓大一點,數字越大展開的速率越快。
 
.inner
 background-color: #439E96
 padding: 0px 10px
 margin: 5px
 max-height: 0
 overflow: hidden
 transition-duration: 0.5s

Display

收合的選單 (hover me)

選單内部

選單内部

選單内部

Leave a Reply

Your email address will not be published. Required fields are marked *