关于前端:Vue3中实现路由跳转的过渡动画一

因为 VueRouter 官网文档写的太过形象，真的特地不好了解，所以我来总结一下如何去更简略地了解路由跳转时的动画。

首先看一下官网对于这个概念的解释。

在刚开始学习的时候，看到黄色框框里内容间接傻眼，从未见过 :is 这个指令。不晓得这个中央到底是固定写法还是让咱们写本人的组件？

一.:is指令是什么意思？

1. 在这里筹备两个文件来演示这个指令的作用。

2.button.vue构造也很简略

就是一个按钮组件

text.vue里并没有本人的组件，而是应用了 component 这个标签来显示出 MyButton 这个组件。

3.props也是能够失常传递的

4. 这样 text.vue 这个组件本身就相当于 MyButton 这个组件，你可能会好奇，这有什么用呢？

5. 如果咱们像上面这样写，我再引入一个组件，而后定义一个变量isChange，于是咱们就能够动静的管制这个组件到底展现哪一个组件了。

让咱们看看页面

点击按钮切换

6. 写到这里，忽然感觉怎么像路由呢？路由不就是来实现这事的吗？那我既然能够这样实现 伪路由 的性能，那我大费周折用 VueRouter 干啥啊？

如果你能想到这里，不得不抵赖，你很棒！然而你有没有想过一个问题，你的 url 地址永远不会变，history对象你也没方法调用，你无奈实现页面回退，后退的性能。

二. 搭配 v-slot 实现组件跳转动画的筹备工作

1. 要看明确这里，你必须晓得 v-slot 的概念，这个我之前的文章里有写，这里不过多赘述

2. 下一步你须要了解的就是，咱们的页面其实是一个单组件页面，也就是所有你看到的页面，都是一个 .vue 文件。

3. 你组件的切换其实都是在 <router-view> 这个组件内展现的，每个组件都是独立的。

4. 所以这里的 <component :is="xxx" > 就和咱们最开始写的 text.vue 组件是截然不同的原理。

tips：心愿你能够细细品味我下面写的四条内容

三. 筹备三个伪页面

1. 这里我想用理论的页面来展现路由跳转的动画，然而咱们明天的主题并不是页面成果，所以这里我抉择了截图三个微信页面，来实现明天要讲的核心内容。

2. 文件名字我翻译一下 发现 , 个人主页 ,index 朋友圈，就是咱们罕用的这三个页面。

3. 构造也是很简略的三个文件，而后把组件全副放进 router 组件里（这里咱们用的是vue-router4）

4. 三个组件构造如下, 大略意思就是点击图片路由跳转到其余页面, 我这里间接将图片作为跳转的 <link> 标签了，为了不便就不设计按钮了。

四. 开始设计动画成果

1. 联合下面的常识，咱们的 App.vue 主页设计为了如下

2. 这里咱们先探讨假如所有组件都利用对立的适度动画。

3. 要想有动画成果，你首先须要确定

这个组件最开始的状态是如何？最终的状态如何，

这句话怎么了解呢？学到这里，我置信你对组件的生命周期曾经有了很好的意识，其实这两个状态就好似对应组件的 onBeforeMount 和onMounted这两个机会。

4. 间接实战解说吧：vue里提供了这几个阶段的类名，须要搭配 css 应用。咱们一个一个讲。

1. 首先是 v-enter-from（后面的v 能够自定义名称，这里我写的是本人的名字，前面须要用到这个）

这个具体到页面是什么意思呢？其实非常简单，就好比下图，组件挂载前的地位，处于 App 组件的 X 轴 的负 本身宽度的 100%

2. 挂载前的地位咱们设置好了，那么接下来就是这个组件挂载后的地位在哪里出现呢？

须要这个v-enter-to

出现到页面如下成果

3. 持续思考，组件挂载前后的地位咱们确定了，那么它两头的过程，心愿它是多少秒实现？什么样的形式实现？如同咱们还没确认。这里须要这个 v-enter-active 类名

具体到页面上的成果就是，我从 X 轴的 -100% 本身宽度，到出现到页面上破费了 2s，ease 单词是 柔和 的意思，在这里咱们不过多赘述 CSS3 的常识，本人能够去 MDN 上温习。

4. 万事俱备，只欠东风。这里只须要在 App 组件的
   router-view 标签内包裹一层 transition 标签即可。

name属性的值就是咱们在上面预留的 fang-enter-from 的fang，mode='out-in'其实是 out 和in两个单词的组合，这里代表着过渡的模式，mode="out-in"的意思是，组件先淡出，才容许下一个组件进入，这个先后顺序十分重要！！！如果设置 mode="in-out" 代表着下一个组件先进入页面，而后以后的组件才退出去，这样会造成页面同时存在两个组件的成果，并不是咱们想要的。

<hr/>

最终成果如下，次要成果曾经实现。当前会学习一下如何录制 gif 图的。

这次讲的跳转成果是所有页面的通用适度，下次会解说如何给两个组件设置独自的挑战成果。

如：在发现进入朋友圈页面上从左边划过，而从朋友圈返回时，发现是从右边滑动的成果