可以使用 max-height 代替 height。

只要我们设置一个肯定比元素自增长大的高度值就可以了。当然,因为是根据 max-height 值进行过渡效果,所以最好不要大得离谱,否则动画效果不理想。

<transition name="fade-height">
<div class="filterInner-wraper">我是内容</div>
</transition>
.filterInner-wraper{
overflow: hidden;
}
// fade-height
.fade-height-enter-active{
transition:all 1s;
opacity: 1;
max-height: 1000px;
}
.fade-height-leave-active{
transition:all 1s;
opacity: 0;
max-height: 0px;
}
.fade-height-leave{
opacity: 0;
max-height: 1000px;
}
.fade-height-enter{
opacity: 0;
max-height: 0px;
}

这里要注意,maxHeight的值越大,它0.5s所要变化的高度就越多,即变化的速度越快~~~


​在VUE中遇到了一个过渡问题​​

​​138.高度为auto的元素使用vue的transition效果​​

​​如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画​​