路由跳转动画（淡入淡出）

需要在 < router-view> 标签的外部添加 < transition> 标签

< router-view> 标签必须为双标签< router-view>< /router-view>

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

过渡的css类名：

v-enter　　进入过渡的开始状态

v-enter-active　　进入活动状态

v-enter-to　　进入的结束状态

v-leave　　离开过渡的开始状态

v-leave-active　　离开活动状态

v-leave-to　　离开结束状态

.slide-left-enter {
 opacity:0;
}
 
.slide-left-leave{
 opacity:1;
}
 
.slide-left-enter-active{
 transition:opacity 2s;
}
 
.slide-left-leave-active{
 opacity:0;
 transition:opacity .5s;
}
.slide-right-enter {
 opacity:0;
}
 
.slide-right-leave{
 opacity:1;
}
 
.slide-right-enter-active{
 transition:opacity 2s;
}
 
.slide-right-leave-active{
 opacity:0;
 transition:opacity .5s;
}

路由里面加个判断动画是左还是右
比如当前路由是index1 要去的是index2 watch就会监听到然后给出相对应动画的css

meta: {  index: 1 }

watch监听判断左右跳转

watch: {//使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if(to.meta.index > from.meta.index){
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
    }
  },