vue transition过度动画的 css使用

vue的过度动画有两种方式

一种是使用 Css的方式来进行设置，另一种就是通过js的方法

这里介绍一下 css  方法

1.首先在template中加入要有过度效果的元素

说明，transition动画要注意三个过程如图

 

v-enter:表示元素刚进入的时候      css设置时这里是不可少的  （第一过程 这个帧只会在第一次出现时存在）

v-enter-active 这里可以理解为一个达到稳定的状态，（第二过程，也是中间实际显示的过程）

这个过程 一般就设置 动画的时长，不用设置其它的 如 {transition:all .8s ease-out}

v-leave-active 表示元素飞出的时候  css 设置时这是也是不可少的 （第三过程）

v-leave   表示元素从静止到消失的时刻，这个帧也只会出现一次