Transition
Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡：
· 条件渲染
· 动态组件
· 组件根节点
一、Transition组件的原理
当插入或删除包含在transition组件中的元素时，Vue将会做以下处理：
1. 自动嗅探目标元素是否应用了CSS过渡或者动画，如果有那么在恰当的时机添加/删除CSS类名；
2. 如果transition提供了JavaScript钩子函数，这些钩子函数酱紫啊恰当的时机被调用；
3. 如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除将会立即执行。
二、Transition组件的属性
1. name：自定义名称
2. type：多种动画同时执行时，以谁的结束时间为基准
3. duration：动画执行时间(优先级较高)。Number/Object类型：Number=1000，Object={enter:800,leave:200}
4. mode：过渡的模式。in-out：进入动画离开之后结束动画开始执行，out-in：结束动画之后再执行开始动画
5.appear：是否有初始渲染动画效果（默认是false）
三、<transition-group>
它不会渲染一个元素的包裹器，但是可以制定一个元素并以 tag attribute 进行渲染
过渡模式不可用，因为不再相互切换特有元素
内部元素需要提供唯一的key attribute值
css过渡的类将会应用在内部的元素中，而不是这个组/容器本身
新增.v-move完成非新增/删除节点的动画
四、过渡动画class
vue就是帮助我们在一些class之间来回切换完成的动画。
tip：transition 定义了 name 的话就将下面的 v 替换掉。
1. v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效（与此同时v-enter-from被移除），在过渡/动画完成之后移除。
4. v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立即生效，下一帧移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立即生效生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效（与此同时v-leave-from被移除），在过渡/动画完成之后移除。
六、自定义过渡动画class
1. enter-from-class
2. enter-active-class
3. enter-to-class
4. leave-from-class
5. leave-active-class
6. leave-to-class
七、animation
.v-enter-active {
animation: bounce 1s ease;
}
.v-leave-active {
animation: bounce 1s ease reverse;
/* reverse 表示动画反转 */
}
@keyframes bounce {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
