vue中实现简单的路由过渡动画

1.使用vue内置过渡组件（transition）包裹路由试图（router-view）

2.为transition添加过渡动画类名

这里使用动态绑定，为了方便之后监听路由时根据路由变化设置为不同类名，达到不同的路由效果

3.利用vue内置过渡类名实现过渡效果

简单来说，vue内置路由类名这里我用的是xxx-enter, xxx-enter-active,xxx-leave-to,xxx-leave-active，这里的xxx就是我们自定义的类名

enter：进入过渡的开始状态

enter-active：进入过渡状态执行结束的状态

leave-to：离开过渡的开始状态

leave-to-active：离开过渡状态执行结束的状态

4.路由文件中增加标价判断前进后退实现不同的效果

这里的tx相当于是给各级路由一个序号，到时候根绝这个序号完成简单的路由过渡判断

5.监听路由变化，根据路由变化，设置不同类名

监听路由变化，通过tx这个标记判断过渡动画需要左滑还是右滑，然后给上不同的类名，这个时候transition会根据响应的类名的过渡生命周期来执行不同的路由动画，关于路由动画那里，可以根据个人想象自由发挥。