高度不固定的元素使用vue的transition效果
原创
©著作权归作者所有:来自51CTO博客作者wx5909dcbadae4c的原创作品,请联系作者获取转载授权,否则将追究法律责任
可以使用 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 动画