Vue3 路由过渡动效技巧，流畅优雅地切换页面

前端

2024-02-02 03:18:13

Vue3 路由过渡基础

Vue3 路由过渡是一种允许开发人员在路由之间切换时创建视觉效果的技术。这可以通过使用内置的过渡组件或创建自定义过渡组件来实现。

内置过渡组件

Vue3 提供了三个内置过渡组件：

<transition>：用于在元素之间切换时创建过渡效果。
<transition-group>：用于在元素组之间切换时创建过渡效果。
<keep-alive>：用于在路由切换时保持组件状态。

自定义过渡组件

开发人员还可以创建自己的自定义过渡组件。这可以通过扩展内置的过渡组件或从头开始创建组件来实现。

Vue2 与 Vue3 路由过渡的区别

Vue2 和 Vue3 中的路由过渡有一些区别。

在 Vue2 中，过渡效果是通过 CSS 类来实现的。而在 Vue3 中，过渡效果是通过 JavaScript 来实现的。
在 Vue2 中，过渡效果只能应用于单个元素。而在 Vue3 中，过渡效果可以应用于元素组。
在 Vue2 中，没有内置的<keep-alive>组件。而在 Vue3 中，提供了内置的<keep-alive>组件，用于在路由切换时保持组件状态。

4 种常用的 Vue 路由动效

下面介绍 4 种常用的 Vue 路由动效：

1. 淡入淡出

淡入淡出是最基本的一种路由动效。它可以通过使用内置的<transition>组件来实现。

<transition name="fade">
  <router-view/>
</transition>

2. 滑动

滑动也是一种常见的路由动效。它可以通过使用内置的<transition-group>组件来实现。

<transition-group name="slide">
  <router-view/>
</transition-group>

3. 缩放

缩放也是一种常见的路由动效。它可以通过使用 CSS 动画来实现。

.scale-enter-active {
  animation: scale-in 0.5s ease-in;
}

.scale-leave-active {
  animation: scale-out 0.5s ease-out;
}

@keyframes scale-in {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scale-out {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}