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

34次阅读

共计 1950 个字符,预计需要花费 5 分钟才能阅读完成。

因为 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. 要想有动画成果,你首先须要确定

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

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

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

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

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

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

须要这个v-enter-to

出现到页面如下成果

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

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

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

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

<hr/>

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


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

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

正文完
 0