路由跳轉添加過渡動效

• 綁定動畫類：

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

• JS控制動畫類是slide-right還是slide-left:

export default {
  data(){
    return{
      transitionName:"",
    } 
  },
  // 監(jiān)聽,當路由發(fā)生變化的時候執(zhí)行
  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>