4 Vue路由过渡动画

Vue 路由转换是个性化 Vue 程序的快速简便的方法。允许在程序的不同页面之间添加平滑的动画和过渡。如果使用得当，它可以让你的程序看起来更加专业，从而提高用户体验。

本文首先介绍了在 Vue 中使用路由转换的基础知识，然后给出了一些示例来激发您的灵感。其中一种情况如下：

在Vue中添加路由

一般的 Vue 路由设置如下所示：

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

在旧版本的 Vue 路由中，我们可以简单地将 <router-view> 用 <transition> 组件包装。

但在较新版本的 Vue 路由中，我们必须使用 v-slot 来销毁 props 并将它们传递到内部插槽。它包含一个被过渡组件包围的动态组件。

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

向路线添加转场

默认情况下，<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 - 渐变过渡

渐变页面过渡应该是最直接的动画类型了。这可以通过更改元素的透明度来实现。

首先，创建一个称为淡入淡出的过渡。请注意，过渡模式设置为 out-in。

共有 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。

对于某些虚拟组件，这是最终的过渡效果。

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

要使此过渡更清晰，请将整个网页背景颜色设置为黑色。

这是最终结果：

<transition>#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教程。
免费分享给挖客，点我看教程