Vue Router過渡動(dòng)效的示例分析

這篇文章給大家分享的是有關(guān)Vue Router過渡動(dòng)效的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

Vue Router 過渡是向Vue應(yīng)用程序添加個(gè)性的一種快速簡(jiǎn)便的方法。 它讓我們可以在應(yīng)用程序的不同頁面之間添加平滑的動(dòng)畫/過渡效果。

如果使用得當(dāng)，它可以讓我們的應(yīng)用程序更加現(xiàn)代和專業(yè)，從而增強(qiáng)用戶體驗(yàn)。

在今天的文章中，我們介紹使用Vue Router過渡的基礎(chǔ)知識(shí)，然后再介紹一些基本示例，希望能給大家一些啟發(fā)和靈感。

下面我們要?jiǎng)?chuàng)建的四個(gè)過渡頁面。

將 Vue 路由過渡添加到項(xiàng)目中

通常，Vue路由器設(shè)置如下所示

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

在舊版本的Vue Router中，我們可以簡(jiǎn)單地用<transition>組件包裝<router-view>。

然而，在Vue Router的新版本中，我們必須使用v-slot來解構(gòu)我們的 props ，并將它們傳遞到我們的內(nèi)部插槽。這個(gè)slow包含一個(gè)被transition包圍的動(dòng)態(tài)組件。

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

每個(gè) Route 都有不同的過渡

默認(rèn)情況下，用<transition>包裝<component>將在我們使用的每條路由上添加相同的過渡。

有兩種不同的方法可以為每個(gè)路由定制轉(zhuǎn)場(chǎng)。

將過 transition 移到各個(gè)組件部分

首先，我們可以將<transition>移到每個(gè)單獨(dú)的組件中，而不是用<transition>組件來包裝我們的動(dòng)態(tài)組件。 如下：

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

對(duì)于我們想要每個(gè)路由都有一個(gè)過渡效果，通過這種方式，我們可以通過過渡的名稱來定制每個(gè)路由。

使用 v-bind 的動(dòng)態(tài)過渡

另一種方法是將過渡的名稱綁定到一個(gè)變量。然后，我們可以根據(jù)監(jiān)聽路由動(dòng)態(tài)地改變這個(gè)變量。

<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 Router Transition 的基礎(chǔ)知識(shí)，下面我們來看一些 Nice 的示例。

1 – Fade Vue Router Transitions

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

我們可以通過更改元素的opacity 來實(shí)現(xiàn)此效果。

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

有三種不同的過渡模式:

• default – 進(jìn)入和離開過渡同時(shí)發(fā)生

• in-out – 新元素的過渡先進(jìn)入。然后，當(dāng)前元素過渡出去。

• out-in - 當(dāng)前元素先過渡出去。然后，新元素過渡進(jìn)來。

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

<transition>為我們提供了幾個(gè)CSS類，它們?cè)趧?dòng)畫周期中被動(dòng)態(tài)添加/刪除。

有6個(gè)不同的過渡類（3個(gè)用于進(jìn)入，3個(gè)用于離開）。

• v-enter-from：定義進(jìn)入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。

• v-leave-from：定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)立刻生效，下一幀被移除。

• v-enter-active：定義進(jìn)入過渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)。

• v-leave-active：定義離開過渡生效時(shí)的狀態(tài)。在整個(gè)離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時(shí)立刻生效，在過渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來定義離開過渡的過程時(shí)間，延遲和曲線函數(shù)。

• v-enter-to：定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter-from 被移除)，在過渡/動(dòng)畫完成之后移除。

• v-leave-to：離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave-from 被刪除)，在過渡/動(dòng)畫完成之后移除。

注意:當(dāng)我們?yōu)檫^渡提供一個(gè)name屬性時(shí)，這是默認(rèn)名稱。類的格式是name-enter-from、name-enter-active，等等。

我們希望進(jìn)入和離開狀態(tài)的opacity 為0。然后，當(dāng)我們的過渡處生效狀態(tài)時(shí)，對(duì) opacity 進(jìn)行動(dòng)畫的處理。

// 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

我們要構(gòu)建的下一個(gè)過渡是幻燈片過渡。

模板如下所示。 由于我們希望進(jìn)入和離開過渡同時(shí)發(fā)生，因此使用默認(rèn)模式即可。

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

為了讓例子更好看，我們給每個(gè)頁面加上下面的樣式：

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

最后，在過渡樣式里為要滑動(dòng)的組件設(shè)置相關(guān)的屬性。如果需要不同的滑動(dòng)方向，只需更改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

創(chuàng)建縮放過渡與我們的淡入過渡非常相似。 我們?cè)俅螌⒛Ｊ皆O(shè)置為 out-in，以便我們可以確保動(dòng)畫的正確順序。

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

這里給整個(gè)網(wǎng)頁提供黑色的背景色會(huì)讓過渡看上去更干凈。

4 – Combining Vue Router Transitions

創(chuàng)建過渡的方式有很多很多但是，我認(rèn)為不要過度過的，刻意的去做過渡。 過渡動(dòng)效應(yīng)該是很小的，微妙的增強(qiáng)功能，而不是會(huì)讓應(yīng)用產(chǎn)生干擾因素。

我認(rèn)為實(shí)現(xiàn)較好過渡是將一些更基礎(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);
}

感謝各位的閱讀！關(guān)于“Vue Router過渡動(dòng)效的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！