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


分析文檔描述

CSS 支持動畫的屬性中的 height 屬性如下:

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

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

所以當元素 height : auto 時,是不支持 CSS3 動畫的。

解決辦法

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

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

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

這里不做詳細說明,可以看一下大神的demo。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM