重点： 1、判断路由前进还是后退
2、切换时动画如何实现
1、需要给各个页面定义层级，切换路由时判断进入哪个层级页面，如果进入层级高页面做前进动画，否则做后退动画
在路由定义中添加meta自定义参数
2、编写进出动画效果样式
使用transition 包裹router-view 使其可以整页实现动画
此处注意：给<transition>外层div增加样式class="Router"，并给div下所有元素增加样式，如下.Router>*
.Router{
position: relative;
}
.Router>*{
position: absolute;
width: 100%;
text-align: center;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 500ms;
}
.slide-right-enter {
opacity: 0;
transform: translateX(-100%);
}
.slide-right-leave-active {
opacity: 0;
transform: translateX(100%);
}
.slide-left-enter {
opacity: 0;
transform: translateX(100%);
}
.slide-left-leave-active {
opacity: 0;
transform: translateX(-100%);
}
3、为组件指定可能执行的动画效果
4、监听路由变化判断具体执行哪个动画
可以通过路由的参数获取到之前设置的索引，从而判断动画效果是向左还是向右
但是使用跳转之后，页面内的固定定位会产生位移，过段时间才会恢复正常，所以我使用的绝对定位。。。。
网友评论