如何實現四個Veu路由過渡動效

這篇文章主要講解了“如何實現四個Veu路由過渡動效”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何實現四個Veu路由過渡動效”吧！

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 &ndash; Fade Vue Router Transitions

添漸隱頁面過渡可能是我們可以添加到Vue應用程序中最常用的動效之一。

我們可以通過更改元素的opacity 來實現此效果。

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

有三種不同的過渡模式:

• default &ndash; 進入和離開過渡同時發生

• in-out &ndash; 新元素的過渡先進入。然后，當前元素過渡出去。

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

為了讓新元素平滑地淡入，我們需要在開始新的過渡之前刪除當前元素。所以我們使用 mode="out-in"。

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

有6個不同的過渡類(3個用于進入，3個用于離開)。

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

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

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

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

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

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

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

感謝各位的閱讀，以上就是“如何實現四個Veu路由過渡動效”的內容了，經過本文的學習后，相信大家對如何實現四個Veu路由過渡動效這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！