高度不定展开收起动画

5,889 阅读1分钟

背景:

要对一块高度不定的 div 加上展开收起的动画

CSS 支持动画的属性中的 height 属性如下:

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

即:当 height 的值是 length,百分比或 calc() 时支持 CSS3 过渡

所以当元素 height : auto 时,是不支持 CSS3 动画的

解决办法:

使用 max-height 代替 height 实现过渡效果

div
   max-height calc(100vh - 288px)   
   transition all 0.6s ease-in-out
.pull-up  // 收起时添加的类名
   max-height 0  
   transition max-height .5s

附上张鑫旭大神通过js代码计算实现过渡效果~