用了不少動效，介紹 4個很 Nice 的 Vue 路由過渡動效！

做者：Ahmad shaded 譯者：前端小智 來源：sitepoint

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub github.com/qq449245884… 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。

Vue Router 過渡是向Vue應用程序添加個性的一種快速簡便的方法。 它讓咱們能夠在應用程序的不一樣頁面之間添加平滑的動畫/過渡效果。

若是使用得當，它可讓咱們的應用程序更加現代和專業，從而加強用戶體驗。

在今天的文章中，咱們介紹使用Vue Router過渡的基礎知識，而後再介紹一些基本示例，但願能給你們一些啓發和靈感。

下面咱們要建立的四個過渡頁面。

將 Vue 路由過渡添加到項目中

一般，Vue路由器設置以下所示

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

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

然而，在Vue Router的新版本中，咱們必須使用v-slot來解構咱們的 props ，並將它們傳遞到咱們的內部插槽。這個slow包含一個被transition包圍的動態組件。

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

每一個 Route 都有不一樣的過渡

默認狀況下，用<transition>包裝<component>將在咱們使用的每條路由上添加相同的過渡。

有兩種不一樣的方法能夠爲每一個路由定製轉場。

將過 transition 移到各個組件部分

首先，咱們能夠將<transition>移到每一個單獨的組件中，而不是用<transition>組件來包裝咱們的動態組件。 以下：

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

對於咱們想要每一個路由都有一個過渡效果，經過這種方式，咱們能夠經過過渡的名稱來定製每一個路由。

使用 v-bind 的動態過渡

另外一種方法是將過渡的名稱綁定到一個變量。而後，咱們能夠根據監聽路由動態地改變這個變量。

<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 Router Transition 的基礎知識，下面咱們來看一些 Nice 的示例。

1 – Fade Vue Router Transitions

添漸隱頁面過渡多是咱們能夠添加到Vue應用程序中最經常使用的動效之一。

咱們能夠經過更改元素的opacity 來實現此效果。

首先，咱們建立一個帶有fade名稱的 Vue Router transition。 還要注意的另外一件事是，咱們將過渡模式設置爲 out-in。

有三種不一樣的過渡模式:

• default – 進入和離開過渡同時發生

• in-out – 新元素的過渡先進入。而後，當前元素過渡出去。

• out-in - 當前元素先過渡出去。而後，新元素過渡進來。

爲了讓新元素平滑地淡入，咱們須要在開始新的過渡以前刪除當前元素。因此咱們使用 mode="out-in"。

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

有6個不一樣的過渡類（3個用於進入，3個用於離開）。

1. v-enter-from：定義進入過渡的開始狀態。在元素被插入以前生效，在元素被插入以後的下一幀移除。

2. v-leave-from：定義離開過渡的開始狀態。在離開過渡被觸發時馬上生效，下一幀被移除。

3. v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入以前生效，在過渡/動畫完成以後移除。這個類能夠被用來定義進入過渡的過程時間，延遲和曲線函數。

4. v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時馬上生效，在過渡/動畫完成以後移除。這個類能夠被用來定義離開過渡的過程時間，延遲和曲線函數。

5. v-enter-to：定義進入過渡的結束狀態。在元素被插入以後下一幀生效 (與此同時 v-enter-from 被移除)，在過渡/動畫完成以後移除。

6. v-leave-to：離開過渡的結束狀態。在離開過渡被觸發以後下一幀生效 (與此同時 v-leave-from 被刪除)，在過渡/動畫完成以後移除。

注意:當咱們爲過渡提供一個name屬性時，這是默認名稱。類的格式是name-enter-from、name-enter-active，等等。

咱們但願進入和離開狀態的opacity 爲0。而後，當咱們的過渡處生效狀態時，對 opacity 進行動畫的處理。

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


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

最後的效果 ：

2 – Slide Vue Router Transitions

咱們要構建的下一個過渡是幻燈片過渡。

模板以下所示。 因爲咱們但願進入和離開過渡同時發生，所以使用默認模式便可。

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

爲了讓例子更好看，咱們給每一個頁面加上下面的樣式：

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

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

// slide styles!
.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 – Scale Vue Router Transitions

建立縮放過渡與咱們的淡入過渡很是類似。 咱們再次將模式設置爲 out-in，以便咱們能夠確保動畫的正確順序。

// scale transition!

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

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


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

這裏給整個網頁提供黑色的背景色會讓過渡看上去更乾淨。

4 – Combining Vue Router Transitions

建立過渡的方式有不少不少可是，我認爲不要過分過的，刻意的去作過渡。 過渡動效應該是很小的，微妙的加強功能，而不是會讓應用產生干擾因素。

我認爲實現較好過渡是將一些更基礎的過渡結合在一塊兒。

例如，讓咱們將幻燈片放大和縮小合併爲一個過渡。

<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);
}
複製代碼

~完，我是刷碗智， 我要去刷碗了，咱們下期見！

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：learnue.co/2021/01/4-a…

刷碗

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub github.com/qq449245884… 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。