在vue過渡動效transition的基礎上實現主頁tab切換

• app.vue 內

<template>
  <div id="app">
       <div class="tab">
        <router-link to="/session" active-class="active">老師</router-link>
        <router-link to="/teacher" active-class="active">訊息</router-link>
        <router-link
 
 to="/mine" active-class="active">我的</router-link>
        </div>
        <transition :name="transitionName">
            <router-view></router-view>    
        </transition>
  </div>
</template>

• 監聽route物件 並判斷路由路徑是否與所點選tab欄路徑一致

watch:{
   '$route'
 
(to,from){
     const toPath = to.path
     const fromPath = from.path
     switch(toPath){
      case '/session': sessionStorage.setItem('toPath',0); break;
      case '/teacher': sessionStorage.setItem('toPath',1); break;
      case '/mine':  sessionStorage.setItem('toPath',2); break; 
     }
     switch
 
(fromPath){
      case '/session': sessionStorage.setItem('fromPath',0); break;
      case '/teacher': sessionStorage.setItem('fromPath',1); break;
      case '/mine':  sessionStorage.setItem('fromPath',2); break; 
     }
     let toIndex = sessionStorage.getItem('toPath')
     let fromIndex = sessionStorage.getItem('fromPath')
     this.transitionName = (toIndex>fromIndex)? 'forward' : 'backward'
   } 

• 相應的引入寫有動畫過程的css檔案

.forward-enter-active,.forward-leave-active{
    transition: 0.5s all ease;
    transform: translateX(0);
}
.forward-enter{
    transform: translateX(100%);
}
.forward-enter-to{
    transform: translateX(0);
}
.forward-leave {
    transform: translate3d(0, 0, 0);
}
 .forward-leave-to {
    transform: translate3d(-100%, 0, 0);
}

.backward-enter-active, .backward-leave-active {
    transition: all 0.5s;
  }
  .backward-leave {
    transform: translate3d(0, 0, 0);
  }
  .backward-leave-to {
    transform: translate3d(100%, 0, 0);
  }
  .backward-enter {
    transform: translate3d(-100%, 0, 0);
  }
  .backward-enter-to {
    transform: translate3d(0, 0, 0);
  }

• 完成~