css3 updown 动画,Vue的transition中的slidedown,slideUp展开收起动画

vue transition动画

vue的transition过渡动画在vue官网已有详细教程，就不赘述了。然而当我们使用transition来实现slidedown，slideup的展开收起动画时，就会发现没有过渡动画，是transition失灵了吗？

当然不是，是因为css3的transition动画需要知道两个信息，开始状态，结束状态。

如上图的点击实现slideup的收起动画，外层div一般高度都是自动的，在transition过程中，css3只知道结束状态是 height：0；

而不知道开始状态 height: **px。所以才没有显示过渡动画。

transition实现slidedown，slideup的方法。

v-on:before-enter="beforeEnter"

v-on:enter="enter"

v-on:after-enter="afterEnter"

v-on:enter-cancelled="enterCancelled"

v-on:before-leave="beforeLeave"

v-on:leave="leave"

v-on:after-leave="afterLeave"

v-on:leave-cancelled="leaveCancelled">

transition除了最常用的方法，还提供了回调钩子的方法。对于slideup的动画，我们要做的就是在beforeEnter钩子回调里面对容器div设置高度为具体数值，

然后在enter中修改height数值为0，那么就能实现slideup的动画过渡了。methods:{

beforeEnter(el){

el.className=el.className+' my-transition';

el.style.height = '0';

// 缺少处理了 overflow:hidden 样式的添加，完整组件需要添加此处理，在动画结束后恢复原来的oveflow样式。

},

enter(el){

el.style.height = el.scrollHeight + 'px';

},

afterEnter(el){

el.className=el.className.replace("my-transition",'');

el.style.height = '';

},

enterCancelled(el){

},

beforeLeave(el){

el.style.height = el.scrollHeight + 'px';

},

leave(el){

let ht=el.scrollHeight;

el.className=el.className+' my-transition';

el.style.height = 0;

},

afterLeave(el){

el.className=el.className.replace("my-transition",'');

el.style.height = '';

},

leaveCancelled(el){

}

}

这其中，我们用到了scrollHeight来获取元素的高度，对于没有滚动条的元素div，此属性有一个特性，即是div的display：none时，也能获取到div完全展现时的高度。是一个取巧的方法。

细心的你一定还注意到了一个className 为 'my-transition',它是设置css transition过渡的关键。.my-transition{transition: .3s height ease-in-out/* , 10.5s padding-top ease-in-out, 10.5s padding-bottom ease-in-out */}

没错，他主要设置了transition属性，来实现transition动画。

结语：

vue的slidedown，slideup的动画是不是只有这一种实现方式呢。条条大路通罗马，肯定有很多中方式，比如animation动画。我们还可以使用vue的状态过渡动画，这可能就需要用到第三方库tween.js了。