4 個 Vue 路由過渡動效

Vue 路由過渡是對 Vue 程序一種快速簡便的增長個性化效果的的方法。 可讓你在程序的不一樣頁面之間增長平滑的動畫和過渡。若是使用得當，可使你的程序顯得更加專業，從而加強用戶體驗。

本文中會先介紹使用 Vue 路由過渡的基礎知識，而後在舉幾個例子，爲你一些靈感。下面是其中的一個案例：

在 Vue 程序中添加路由

通常 Vue 路由設置以下所示：

<template>
  <router-view />
</template>
複製代碼

在舊版本的 Vue 路由中，咱們能夠簡單地用 <transition> 組件包裝 <router-view>。

可是，在較新版本的 Vue 路由中則必須用 v-slot 來解構 props 並將它們傳遞到咱們的內部 slot 中。 這將包含一個動態組件，該組件被過渡組件包圍。

<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>
複製代碼

爲路由添加過渡

默認狀況下，用 <transition> 包裹 <component> 會在你應用的每一個路由上添加相同的過渡。

能夠經過兩種方式爲每一個路由自定義轉場效果。

將過渡移到每一個組件中

首先，不用把咱們的動態組件與過渡組件包裝在一塊兒，能夠將 <transition> 移動到每一個單獨的組件中。 像這樣：

<template>
  <transition>
    <div class="wrapper">
      <!-- -->
    </div>
  </transition>
</template>
複製代碼

依此類推，對要進行過渡的每條路由進行處理。 這樣就能夠經過修改過渡名稱來自定義每條路由。

用 v-bind 進行動態過渡

另外一個方法是將過渡的名稱綁定到變量。 而後就能夠根據本身的路有動態地修改這個變量。

這是 Vue 路由文檔中的例子。在當前路由上用觀察模式來動態設置 transitionName 變量。

<transition :name="transitionName">
  <component :is="Component" />
</transition>

複製代碼

watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}
複製代碼

如今咱們瞭解了 Vue 路由過渡的基礎知識，下面讓來看一些例子。

#1 – 漸變過渡

漸變頁面過渡應該是最直接的一種動效。能夠經過修改元素的透明度來實現。

首先，建立一個名爲 fade 過渡。須要注意的是過渡模式設置爲 out-in。

總共有 3 種過渡模式：

1. default：淡入和淡出過渡同時發生
2. in-out：新元素首先淡入。 而後當前元素淡出。
3. out-in：當前元素先淡出。 而後新元素開始淡入。

爲了使新元素順利淡入，咱們須要在開始新過渡以前將當前元素刪除。因此必須用 mode = "out-in"。

<router-view v-slot="{ Component }">
  <transition name="fade" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>
複製代碼

<transition> 爲提供了幾個 CSS 類，它們可以在動畫週期中被動態添加或刪除。

有 6。個不一樣的過渡類（3 個用於淡入，3 個用於淡出）。

• v-enter-from / v-leave-from: 過渡的初始狀態，過分開始後將其刪除
• v-enter-active / v-leave-active: 過渡的激活狀態
• v-enter-to / v-leave-to: 過渡的結束狀態

咱們的淡入淡出過渡有一個名爲 fade-enter-from 的類。

咱們但願淡入和淡出狀態的透明度爲 0。而後當過渡處於活動狀態時，但願對透明度進行動畫處理。

咱們甚至沒必要將透明度設置爲1，由於在動畫製做過程當中會刪除 fade-enter-from 和 fade-leave-to 類。 這會使元素本身單獨設置爲默認透明度爲 1 的動畫。

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
複製代碼

配合一些虛擬組件，這就是最終過渡效果。

#2 – 幻燈片過渡

下一個是頁面幻燈片過渡。

模板將以下。 因爲但願淡入和淡出過渡同時發生，因此咱們不想爲過渡設置特殊的模式。

<router-view v-slot="{ Component }">
  <transition name="slide">
    <component :is="Component" />
  </transition>
</router-view>
複製代碼

爲了使例子更容易理解，我把每一個組件的寬度都設爲100％，並佔用至少 1 vh，還分別設置了背景色。

.wrapper {
  width: 100%;
  min-height: 100vh;
}
複製代碼

最後過渡樣式將爲要滑動組件的絕對位置設置動畫。若是須要不一樣的滑動方向，只需更改要設置的CSS屬性（ top, bottom, left, right）。

.slide-enter-active,
.slide-leave-active {
  transition: all 0.75s ease-out;
}


.slide-enter-to {
  position: absolute;
  right: 0;
}


.slide-enter-from {
  position: absolute;
  right: -100%;
}


.slide-leave-to {
  position: absolute;
  left: -100%;
}


.slide-leave-from {
  position: absolute;
  left: 0;
}
複製代碼

這是最終效果：

#3 – 縮放過渡

縮放過渡與漸變過渡很是類似。一樣須要把模式設置爲 out-in，這樣能夠確保動畫的正確順序。

<router-view v-slot="{ Component }">
  <transition name="scale" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>
複製代碼

而後用樣式改變元素的透明度和 transform: scale。

.scale-enter-active,
.scale-leave-active {
  transition: all 0.5s ease;
}


.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}
複製代碼

爲了使這個過渡看上去更乾淨，能夠把整個網頁的背景色設置爲黑色。

這是最終效果：

#4 – 組合過渡

過渡的效果有不少不少，經常使用的作法是把一些基礎的過渡結合在一塊兒，例如把幻燈片和縮放合併爲一個過渡。

<router-view v-slot="{ Component }">
  <transition name="scale-slide">
    <component :is="Component" />
  </transition>
</router-view>
複製代碼

.scale-slide-enter-active,
.scale-slide-leave-active {
  position: absolute;
  transition: all 0.85s ease;
}

.scale-slide-enter-from {
  left: -100%;
}

.scale-slide-enter-to {
  left: 0%;
}

.scale-slide-leave-from {
  transform: scale(1);
}

.scale-slide-leave-to {
  transform: scale(0.8);
}
複製代碼

這是最終效果

看上去還不錯吧。

#5 – 寫在最後

近期在提高 Vue 的過程當中，發現一個高逼格的 Vue3+TS 教程。 無償分享給掘仔們，戳我看教程