简要了解和快速上手vue的过渡动画

此博文仅凭本人实践及理解，讲解vue的过渡动画知识要点，方便大家快速上手。更系统全面的学习请移步官网：vue-router过渡

一、第一步必须为元素添加上<transition></transition>包裹，这是vue封装的过渡动画组件，相当于设置过渡的声明。深入点讲，当声明了这个组件，将为该元素自动添加上过渡生命周期的六个class，下面会讲到。

<transition name="fade">
	<router-view></router-view>
</transition>

name是transition组件自带的一个标识属性，相当于我们的姓名，如果不声明name，那么默认为"v"，过渡生命周期class前缀为"v"(例：.v-enter-active)；若声明了name，如例子name=“fade”，则过渡生命周期class前缀为"fade"。建议大家有个声明name的好习惯，如我的上一篇博文中，配合v-bind绑定name能实现更多功能。

二、上面一直提到的过渡生命周期class到底是什么？这里划重点，理解透了也就掌握该知识点了。先挂一张官方图：

过渡声明周期由六个阶段组合实现，分别由六个class体现。
进入enter：
v-enter：它定义进入过渡动画的开始状态，在元素插入前生效，在插入后的下一帧立刻移除。
v-enter-active：它定义整个进入过渡动画的状态，生效于从元素插入前至动画结束后，可用来定义过渡时间、速度曲线、延迟等。
v-enter-to：它定义进入过渡动画的结束状态，在元素插入后生效，直至动画结束后移除。
离开leave：
v-leave：它定义离开过渡动画的开始状态，在过渡触发时生效，在下一帧立刻移除。
v-leave-active：它定义整个离开过渡动画的状态，生效于过渡触发时至动画结束后，可用来定义过渡时间、速度曲线、延迟等。
v-leave-to：它定义离开过渡动画的结束状态，在过渡触发之后生效，直至动画结束后移除。

有人会说：“这不跟官方解释的差不多嘛”。确实是，因为我认为官方此处对6个生命周期的说明已经是要点概括，希望大家反复咀嚼，对6个类分别定义的内容和起止周期作个区分和认识，ok了请继续往下看。

靠本人实战经验和使用习惯总结：
1.进入过渡的生命周期中，v-enter是重要的一环，需要定义好元素过渡开始前的状态。若没有定义v-enter-to，过渡会按默认0或极值执行，例如opacity透明值会默认至1、translate偏移值会默认回0，所以它不是必要定义的类。
2.离开过渡的生命周期中，v-leave-to是重要的一环，需要定义好元素动画结束后的状态。若v-leave没有定义，元素会以当前状态作为离开的开始状态，所以它也不是必要定义的类。
3.而进入离开的v-enter-active、v-leave-active可以定义过渡的时间、速度、延迟等配置。当为路由切换设置过渡时，可以在这两个周期上设置绝对定位，避免页面切换是元素的大幅度位置抖动。