4個很 Nice 的Vue Router過渡動效，快來收藏吧！

本篇文章為大家介紹4個很 Nice 的 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 ? &#39;slide-right&#39; : &#39;slide-left&#39;
  }
}

現在，我們了解了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個用於離開）。

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

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

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

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

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

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

原文地址：https://learnue.co/2021/01/4-awesome-of-vue-router-transitions/

作者：Ahmad shaded

译文地址：https://segmentfault.com/a/1190000039802609

更多编程相关知识，请访问：编程视频！！

以上是4個很 Nice 的Vue Router過渡動效，快來收藏吧！的詳細內容。更多資訊請關注PHP中文網其他相關文章！