Vue實現路由過渡動效的4種方法
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 種過渡模式：
default：淡入和淡出過渡同時發生 in-out：新元素首先淡入。 然后當前元素淡出。 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;}
配合一些虛擬組件，這就是最終過渡效果。
下一個是頁面幻燈片過渡。
模板將如下。 由于希望淡入和淡出過渡同時發生，所以我們不想為過渡設置特殊的模式。
<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;}
這是最終效果：
縮放過渡與漸變過渡非常相似。同樣需要把模式設置為 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);}
為了使這個過渡看上去更干凈，可以把整個網頁的背景色設置為黑色。
這是最終效果：
過渡的效果有很多很多，常用的做法是把一些基礎的過渡結合在一起，例如把幻燈片和縮放合并為一個過渡。
<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 教程。
到此這篇關于Vue實現路由過渡動效的4種方法的文章就介紹到這了,更多相關Vue 路由過渡動效 內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備