效果展示

css 滑入和滑出的動畫

.twofade-enter {transform: translateX(100%);}
.twofade-enter-active {transition: all 0.3s;position: absolute;height:100%;background:#ececec;}
.twofade-leave-active {transition: all 0;transition-delay: 0.3s;position: absolute;}
.twofade-leave-to {transform: translateX(-100%);}

.threefade-enter {transform: translateX(-100%);}
.threefade-leave-to {transform: translateX(100%);} 
.threefade-enter-active {transition: all 0s;position: absolute;z-index: 2;}
.threefade-leave-active {transition: all .3s;position: absolute;z-index: 999;height: 100%;background:#ececec;}
 

transition

使用 vue提供的 transition 標籤，data中定義 transitionName 變數

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>

export default {
  name:"App",
  data(){
    return{
      transitionName:""
    }
  }
}
 

watch 監聽路由的變化

通過監聽路由的變化 知道是返回還是開啟新頁面 在通過在變數 transitionName 賦不同的值改變動畫

watch:{
    $route(to, from) {
      if(to.meta.index > from.meta.index){
        this.transitionName = 'twofade';
      }else if(to.meta.index < from.meta.index){
        this.transitionName = 'threefade';
      }
    }
  }
 

可能遇到的問題

關於樣式 操作上在切換中可能會有遇到樣式的問題 需要調整樣式來達到自己需要的效果
我的解決方法是

#app{//width: 100%;height: 100%;overflow-x: hidden;position: absolute;
  &>div{width: 100%;min-height: 100vh;}
}