Vue 路由過渡是對 Vue 程序一種快速簡便的增加個(gè)性化效果的的方法。 可以讓你在程序的不同頁面之間增加平滑的動(dòng)畫和過渡。如果使用得當(dāng)，可以使你的程序顯得更加專業(yè)，從而增強(qiáng)用戶體驗(yàn)。

本文中會(huì)先介紹使用 Vue 路由過渡的基礎(chǔ)知識，然后在舉幾個(gè)例子，為你一些靈感。下面是其中的一個(gè)案例：

在 Vue 程序中添加路由

一般 Vue 路由設(shè)置如下所示：

<template>
  <router-view />
</template>

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

但是，在較新版本的 Vue 路由中則必須用 v-slot 來解構(gòu) props 并將它們傳遞到我們的內(nèi)部 slot 中。 這將包含一個(gè)動(dòng)態(tài)組件，該組件被過渡組件包圍。

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

為路由添加過渡

默認(rèn)情況下，用 <transition> 包裹 <component> 會(huì)在你應(yīng)用的每個(gè)路由上添加相同的過渡。
可以通過兩種方式為每個(gè)路由自定義轉(zhuǎn)場效果。

將過渡移到每個(gè)組件中

首先，不用把我們的動(dòng)態(tài)組件與過渡組件包裝在一起，可以將 <transition> 移動(dòng)到每個(gè)單獨(dú)的組件中。 像這樣：

<template>
  <transition>
    <div class="wrapper">
      <!-- -->
    </div>
  </transition>
</template>

依此類推，對要進(jìn)行過渡的每條路由進(jìn)行處理。 這樣就可以通過修改過渡名稱來自定義每條路由。

用 v-bind 進(jìn)行動(dòng)態(tài)過渡

另一個(gè)方法是將過渡的名稱綁定到變量。 然后就可以根據(jù)自己的路有動(dòng)態(tài)地修改這個(gè)變量。
這是 Vue 路由文檔中的例子。在當(dāng)前路由上用觀察模式來動(dòng)態(tài)設(shè)置 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'
  }
}

現(xiàn)在我們了解了 Vue 路由過渡的基礎(chǔ)知識，下面讓來看一些例子。

#1 – 漸變過渡

漸變頁面過渡應(yīng)該是最直接的一種動(dòng)效?？梢酝ㄟ^修改元素的透明度來實(shí)現(xiàn)。
首先，創(chuàng)建一個(gè)名為 fade 過渡。需要注意的是過渡模式設(shè)置為 out-in。

總共有 3 種過渡模式：

• default：淡入和淡出過渡同時(shí)發(fā)生
• in-out：新元素首先淡入。 然后當(dāng)前元素淡出。
• out-in：當(dāng)前元素先淡出。 然后新元素開始淡入。

為了使新元素順利淡入，我們需要在開始新過渡之前將當(dāng)前元素刪除。所以必須用 mode = "out-in"。

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

<transition> 為提供了幾個(gè) CSS 類，它們能夠在動(dòng)畫周期中被動(dòng)態(tài)添加或刪除。
有 6。個(gè)不同的過渡類（3 個(gè)用于淡入，3 個(gè)用于淡出）。

• v-enter-from / v-leave-from: 過渡的初始狀態(tài)，過度開始后將其刪除
• v-enter-active / v-leave-active: 過渡的激活狀態(tài)
• v-enter-to / v-leave-to: 過渡的結(jié)束狀態(tài)

我們的淡入淡出過渡有一個(gè)名為 fade-enter-from 的類。

我們希望淡入和淡出狀態(tài)的透明度為 0。然后當(dāng)過渡處于活動(dòng)狀態(tài)時(shí)，希望對透明度進(jìn)行動(dòng)畫處理。

我們甚至不必將透明度設(shè)置為1，因?yàn)樵趧?dòng)畫制作過程中會(huì)刪除  fade-enter-from 和 fade-leave-to 類。 這會(huì)使元素自己單獨(dú)設(shè)置為默認(rèn)透明度為 1 的動(dòng)畫。

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

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

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

#2 – 幻燈片過渡

下一個(gè)是頁面幻燈片過渡。

模板將如下。 由于希望淡入和淡出過渡同時(shí)發(fā)生，所以我們不想為過渡設(shè)置特殊的模式。

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

為了使例子更容易理解，我把每個(gè)組件的寬度都設(shè)為100％，并占用至少 1 vh，還分別設(shè)置了背景色。

.wrapper {
  width: 100%;
  min-height: 100vh;
}

最后過渡樣式將為要滑動(dòng)組件的絕對位置設(shè)置動(dòng)畫。如果需要不同的滑動(dòng)方向，只需更改要設(shè)置的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 – 縮放過渡

縮放過渡與漸變過渡非常相似。同樣需要把模式設(shè)置為 out-in，這樣可以確保動(dòng)畫的正確順序。

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

為了使這個(gè)過渡看上去更干凈，可以把整個(gè)網(wǎng)頁的背景色設(shè)置為黑色。

這是最終效果：

#4 – 組合過渡

過渡的效果有很多很多，常用的做法是把一些基礎(chǔ)的過渡結(jié)合在一起，例如把幻燈片和縮放合并為一個(gè)過渡。

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

這是最終效果

看上去還不錯(cuò)吧。

#5 – 寫在最后

近期在提升 Vue 的過程中，發(fā)現(xiàn)一個(gè)高逼格的 Vue3+TS 教程。

到此這篇關(guān)于Vue實(shí)現(xiàn)路由過渡動(dòng)效的4種方法的文章就介紹到這了,更多相關(guān)Vue 路由過渡動(dòng)效 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論