VUE动画
1.vue不能直接实现动画,它提供动画各阶段需要的class;
2.<transition>或者<transition-group>组件提供class;
3.在vue中,动画是在元素显示与隐藏的过程中,添加class实现的(v-if v-else
v-show);
4.transition组件提供:
v-enter-active元素整个进入的过程
①v-enter元素进入的初始状态;
②v-enter-to元素进入的结束状态;
v-leave-active元素整个离开的过程
①v-leave元素的离开初始状态;
②v-leave-to元素的离开结束状态;
自定义动画名:
enter-active-class="xxx";
leave-active-class="xxx";
要引入第三方css,animate.css
动画模式mode:
in-out先执行进入动画,再执行离开动画;
out-in先执行离开动画,再执行进入动画;
transition-group组件:
tag指定标签;
move-class给正在移动的元素添加类;
name动画名称;
enter-active-class="xxx";
leave-active-class="xxx";