介紹 4個很 Nice 的 Veu 路由過渡動效!

前端小智發表於2022-03-28
作者:Ahmad shaded
譯者:前端小智
來源:sitepoint

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

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

Vue Router 過渡是向Vue應用程式新增個性的一種快速簡便的方法。 它讓我們可以在應用程式的不同頁面之間新增平滑的動畫/過渡效果。

如果使用得當,它可以讓我們的應用程式更加現代和專業,從而增強使用者體驗。

在今天的文章中,我們介紹使用Vue Router過渡的基礎知識,然後再介紹一些基本示例,希望能給大家一些啟發和靈感。

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

image

將 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-fromname-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;
}

最後的效果 :

image

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

最終的效果:

image

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

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

image

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

image

~完,我是刷碗智, 我要去刷碗了,我們下期見!

程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug

原文:https://learnue.co/2021/01/4-...

交流

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

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

相關文章