4 个 Vue 路由过渡动效

Vue 路由过渡是对 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 种过渡模式：

1. default：淡入和淡出过渡同时发生
2. in-out：新元素首先淡入。 而后当前元素淡出。
3. 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;
}
复制代码

配合一些虚拟组件，这就是最终过渡效果。

#2 – 幻灯片过渡

下一个是页面幻灯片过渡。

模板将以下。 因为但愿淡入和淡出过渡同时发生，因此咱们不想为过渡设置特殊的模式。

<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;
}
复制代码

这是最终效果：

#3 – 缩放过渡

缩放过渡与渐变过渡很是类似。一样须要把模式设置为 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);
}
复制代码

为了使这个过渡看上去更干净，能够把整个网页的背景色设置为黑色。

这是最终效果：

#4 – 组合过渡

过渡的效果有不少不少，经常使用的作法是把一些基础的过渡结合在一块儿，例如把幻灯片和缩放合并为一个过渡。

<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 教程。 无偿分享给掘仔们，戳我看教程