Vue学习笔记——过渡动画

过渡动画状态图：

图片来源：https://cn.vuejs.org/v2/guide/transitions.html
v-enter:动画开始进入的状态
v-enter-to:动画进入完成的状态
v-leave:动画开始离开的状态
v-leave-to:动画离开完成的状态
v-enter-active:动画从开始进入到进入完成这一过程
v-leave-active:动画从开始离开到离开完成这一过程

动画的使用：

<transition name="fade">
进行动画元素
  </transition>

进行动画的元素要放在transition标签中（vue特有的标签）
设置v-enter、v-leave-to动画开始和结束状态的样式，设置v-enter-active、
v-leave-active动画进入和动画离开的动作
注:如果在transition标签里规定了name值，将v替换成name值，如：
<transition name="fade">即fade-enter、fade-leave-to、fade-enter-active、
fade-leave-active
.v-enter-active, .v-leave-active {
}
.v-enter, .v-leave-to {
}