vue过渡动画效果学习总结

一.过渡动效

1.提供了transition的封装组件，添加过渡动画
2.添加删除css类名

二.过渡的css类名

v-enter:定义进入过渡的开始状态
v-enter-active：定义进入活动状态，比如设置时间等
v-enter-to:定义进入的结束状态
v-leave:定义离开过渡的开始状态
v-leave-active:定义离开活动状态
v-leave-to:定义离开的结束状态

三.过渡模式
in-out:新元素先进行过渡，完成之后当前元素过渡离开（先进然后离开）
out-in:当前元素进行过渡，完成之后新元素过渡进入（先离开在进入）

// name自定义样式开头
<transition mode="out-in" name="left">
</transtion>

left-enter: {
    opacity: 1;
}