用了很多动效，介绍 4个很 Nice 的 Vue 路由过渡动效！

朴灿烈づ我的快乐病毒、 2023-01-13 05:40 120阅读 0赞

> 作者：Ahmad shaded  
> 译者：前端小智  
> 来源：sitepoint

> **点赞再看，养成习惯**
> 
> **本文 `GitHub` https://github.com/qq449245884/xiaozhi 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。**

Vue Router 过渡是向Vue应用程序添加个性的一种快速简便的方法。 它让我们可以在应用程序的不同页面之间添加平滑的动画/过渡效果。

如果使用得当，它可以让我们的应用程序更加现代和专业，从而增强用户体验。

在今天的文章中，我们介绍使用Vue Router过渡的基础知识，然后再介绍一些基本示例，希望能给大家一些启发和灵感。

下面我们要创建的四个过渡页面。

![111.gif][]

### 将 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 的动态过渡 ####

另一种方法是将过渡的名称绑定到一个变量。然后，我们可以根据监听路由动态地改变这个变量。

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 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个用于离开）。

1.  `v-enter-from`：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2.  `v-leave-from`：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
3.  `v-enter-active`：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
4.  `v-leave-active`：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
5.  `v-enter-to`：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 `v-enter-from` 被移除)，在过渡/动画完成之后移除。
6.  `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;
    }

最后的效果 ：

![222.gif][]

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

最终的效果:

![333.gif][]

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

这里给整个网页提供黑色的背景色会让过渡看上去更干净。

![444.gif][]

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

![555.gif][]

~完，我是刷碗智， 我要去刷碗了，我们下期见！

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

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

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[111.gif]: /images/20221022/66b9ae04479a4a7694b405eb7f438686.png
[222.gif]: /images/20221022/a191223615b546639cdb13e742348c20.png
[333.gif]: /images/20221022/2a022b2d72af44d9a1f11a523e5b989f.png
[444.gif]: /images/20221022/3a1830ad13424e15b237a6fe1b43ce12.png
[555.gif]: /images/20221022/12cce3eb6f8e4cb4abf1958081ab833f.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi