不定高元素的高度transition動畫實現

分析文檔描述

CSS 支持動畫的屬性中的 height 屬性以下：

height ：yes, as a length, percentage or calc()

即：當 height 的值是 length，百分比或 calc() 時支持 CSS3 過渡。

因此當元素 height : auto 時，是不支持 CSS3 動畫的。

解決辦法

1、使用max-height屬性代替height實現過渡效果

div{
  max-height: 0;
  transition: max-height .5s;
}
div:hover{
  max-height: 200px;
}

2、使用js獲取精確的 height 值

這裏不作詳細說明，能夠看一下大神的demo。

不定高度動態元素height CSS3 transition過渡動畫實例頁面