vue路由切換滑動效果

1.增加頁面路由

{
    path: '/feedbackList',
    name: 'feedbackList',
    component: () => import('../views/feedbackList/index'),
    meta:{
      title: "反饋列表",
      index: 1
    }
  },
  {
    path: '/feedbackRecordList',
    name: 'feedbackRecordList',
    component: () => import('../views/feedbackList/record'),
    meta:{
      title: "記錄列表",
      index: 2
    }
  },
  {
    path: '/feedbackRecordDetails',
    name: 'feedbackRecordDetails',
    component: () => import('../views/feedbackList/details'),
    meta:{
      title: "記錄詳情",
      index: 3
    }
  }

2.修改

接著，我們開啟 App.vue 頁面

將<router-view />

修改為

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

3.App.vue最終程式碼

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

<script>
export default {
  name: 'App',
  data() {
    return {
      transitionName: "",
    };
  },
  methods: {
  },
  components: {
  },
  watch:{
    $route(to,from){
      //實現路由跳轉動畫
      if (to.meta.index > from.meta.index)  
        this.transitionName = "slide-left";
      if (to.meta.index < from.meta.index)
        this.transitionName = "slide-right";
    }
  }
}
</script>

<style>
#app {
  height: 100%;
  min-height: 100%;
}
/* 路由頁面跳轉互動 */
.slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active {
  will-change: transform;
  transition: all .5s;
  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>