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) 当停止后页面的状态