vue2路由组件切换动画

参考文章
1.在路由对象的原型中添加一个方法和一个属性

Router.prototype.goBack = function () { 
    //也可以用下面注释的那种写法，this指向的就是Router.prototype
    //设置isBack为真让组件动画向右
　　this.isBack = true
　　window.history.go(-1)
}
//Router.prototype.isBack=true

2.到要应用切换动画的roter-view中添加渐变动画

<transition :name="transitionName"> 
        <router-view class="Router"/>
</transition>

2.1.在style标签中添加样式

.Router {
     transition: all 5s ease;
}
.slide-left-enter,
 .slide-right-leave-active {
     opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
     opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100% 0);
}

3.在router-view所在组件中增加一个data属性

return {
　　　　　　transitionName: 'slide-right'  // 默认动态路由变化为slide-right
　　　　}

4.在rotuer-view所在组件监听路由切换

$route (to, from) {
  　　　let isBack = this.$router.isBack//监听路由变化时的状态为前进还是后退
  　　　if(isBack) {
      　　　//向右后退
  　　　　　this.transitionName = 'slide-right'
  　　　} else {
      　　　//向左前进
  　　　　　this.transitionName = 'slide-left'
  　　　}
  　　  this.$router.isBack = false
　　　}

5.后退向右滑动
调用前面定义好的goBack方法，改变切换动画状态向右，和返回上一页

goBack(){
    this.$router.goBack()
}

nice,请注意$route和$router
6.注意事项
在使用转场动画时，正在进行转换动画播放过程中，新的组件和旧的组件dom都存在，就是说在指定动画的时间内旧dom还是存在的，如果你两个组件有重名的id，你的代码逻辑可能处理到旧的dom中了。