vue路由切換滑動效果 vue頁面跳轉互動 vue實現動畫跳轉

鹏仔先生發表於2024-04-24
Vue路由動畫

Hello，大家好，我是小編鵬仔，鵬仔一直覺得VUE在H5端路由跳轉時互動特別醜，一直想寫成那種點選滑動切換類的效果，趁著這兩天工作不是很忙就網上搜了下，最終在多個搜尋結果中選擇了一種方式實現，效果如下圖所示，點選路由跳轉時是頁面是滑動切換。

邏輯其實還是很簡單的，就是監聽在路由切換時加css效果即可，下方跟著鵬仔來一步一步的去新增實現吧！

首先，我們在router.js中，給每個要切換的路由meta中加index索引，用來判斷頁面動畫的方向（頁面在返回或者跳轉判斷向右滑動還是向左滑動方向，簡單理解為上下頁區分吧）。

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

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

將

<router-view />

修改為

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

在data中定義

data() {
  return {
    transitionName: "",
  };
}

在watch中監聽路由跳轉時修改name

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";
  }
}

最後在css中新增樣式，即可實現

.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%);
}

這個切換是使用了css的位移屬性，如果您時間夠閒，可以改為 漸變 旋轉 縮放 等花裡胡哨的效果（https://www.sharedbk.com/post/131.html）。

下方為完整的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>

鵬仔擴充套件

<transition name=""></transition>

v-enter：進入(顯示)開始時的狀態

v-enter-active：進入(顯示)過程中的狀態

v-enter-to：進入(顯示)結束時的狀態

v-leave：離開(隱藏)開始時的狀態

v-leave-active：離開(隱藏)過程中的狀態

v-leave-to：離開(隱藏)結束時的狀態

相關文章