vue-router之实现导航切换过渡动画效果

<transition mode="out-in">
 <router-view class="center"></router-view>
</transition>

.v-enter{
 opacity: 0;
}
.v-enter-active{
 transition: 0.5s;
}
.v-enter-to{
 opacity: 1;
}
.v-leave{
 opacity: 1;
}
.v-leave-to{
 opacity:0;
}
.v-leave-active{
 transition: 0.5s;
}

.left-enter{
 transform:translateX(100%);
}
.left-enter-to{
 transform:translateX(0);
}
 
.left-enter-active{
 transition: 1s;
}
.left-leave{
 transform:translateX(0);
}
.left-leave-to{
 transform:translateX(-100%);
}
.left-leave-active{
 transition: 1s;
}

<transition name="left">
  <!--<router-view name="slider"></router-view>-->
  <router-view class="center"></router-view>
 </transition>

.right-enter{
 transform:translateX(-100%);
 }
 .right-enter-active{
 transition: 1s;
 }
 .right-leave-to{
 transform:translateX(100%);
 }
 .right-leave-active{
 transition: 1s;
 }

meta:{
  index:0
  }

watch:{
 $route(to,from){
 console.log(to.meta.index);//目标导航下标
 console.log(from.meta.index);//离开导航下标
 }
}

watch:{
 $route(to,from){
  if(to.meta.index<from.meta.index){
  this.names="right"
  }else{
  this.names="left"
  }
 }
 },
 data(){
 return{
  index:'/home',
  names:'left'
 }
 }