路由跳转添加过渡动效

• 绑定动画类：

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

• JS控制动画类是slide-right还是slide-left:

export default {
  data(){
    return{
      transitionName:"",
    } 
  },
  // 监听,当路由发生变化的时候执行
  watch:{
      $route(to,from){
           const toDepth = to.path.split('/').length
           const fromDepth = from.path.split('/').length
           this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

• 动画样式

<style lang="scss">
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
    will-change: transform;
    transition: all 500ms;
    position:absolute;
    }
    
    .slide-right-enter {
    opacity: 0;
    transform: translate(-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%);
    }
</style>