vue的动画操作css以及js操作

transition组件

toggle切换隐藏和显示

css过渡

渐入    v-enter    v-enter-active

渐出     v-leave    v-leave-active

transition中只有name属性，不可添加其他标签属性

transition中只能有一个子元素并且该子元素需要有v-show或者v-if来控制是否显示

过渡CSS类名

v-enter:定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

v-enter-active:定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除。

v-leave:定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

v-leave-active:定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。

改变从左到右从上到下

三种方式过渡

1.v-show

2、v-if和v-else

3、：is动态改变组件的方法

js过渡

v-on:before-enter(v-on:befroe-leave)    进入(出去)的状态，设置初始状态

v-on:enter (v-on:leave)       渐入(渐出)的过程中，设置中间状态

v-on:after-enter(v-on:after-leave)     进入（出去）后的状态

v-on:enter-cancelled(v-on:leave-cancelled) 当停止后页面的状态