leave

vue 动画之展开收起

别等时光非礼了梦想. 提交于 2019-11-29 18:48:12
亲测好用: https://www.hangge.com/blog/cache/detail_2386.html 方法一 . 用css实现 高度已知的 内容区域的展开收起: <template> <transition name="myWrap" class="myWrap"> <div style="height: 54px;" v-if="show"></div> </transition> </tempalte> <style> .myWrap{ transition: all ease .2s; } .myWrap-enter-active { animation: identifier .2s; overflow: hidden; } .myWrap-leave-active { animation: against .2s ; overflow: hidden; } @keyframes identifier { from { height: 0; } to { height: 54px; } } @keyframes against { from { height: 54px; } to { height: 0; } } </style> 方法二 . 用js 和 velocity-animate实现 多个可计算出高度的 内容区域的展开收起: <template>