共计 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. 要想有动画成果,你首先须要确定
这个组件最开始的状态是如何?最终的状态如何,
这句话怎么了解呢?学到这里,我置信你对组件的生命周期曾经有了很好的意识,其实这两个状态就好似对应组件的 onBeforeMount
和onMounted
这两个机会。
4. 间接实战解说吧:vue
里提供了这几个阶段的类名,须要搭配 css
应用。咱们一个一个讲。
1. 首先是 v-enter-from
(后面的v
能够自定义名称,这里我写的是本人的名字,前面须要用到这个)
这个具体到页面是什么意思呢?其实非常简单,就好比下图,组件挂载前的地位,处于 App
组件的 X 轴
的负 本身宽度的 100%
- 挂载前的地位咱们设置好了,那么接下来就是这个组件挂载后的地位在哪里出现呢?
须要这个v-enter-to
出现到页面如下成果
- 持续思考,组件挂载前后的地位咱们确定了,那么它两头的过程,心愿它是多少秒实现?什么样的形式实现?如同咱们还没确认。这里须要这个
v-enter-active
类名
具体到页面上的成果就是,我从 X
轴的 -100%
本身宽度,到出现到页面上破费了 2s
,ease
单词是 柔和
的意思,在这里咱们不过多赘述 CSS3
的常识,本人能够去 MDN
上温习。
- 万事俱备,只欠东风。这里只须要在
App
组件的router-view
标签内包裹一层transition
标签即可。
name
属性的值就是咱们在上面预留的 fang-enter-from
的fang
,mode='out-in'
其实是 out
和in
两个单词的组合,这里代表着过渡的模式,mode="out-in"
的意思是,组件先淡出,才容许下一个组件进入,这个先后顺序十分重要!!!如果设置 mode="in-out"
代表着下一个组件先进入页面,而后以后的组件才退出去,这样会造成页面同时存在两个组件的成果,并不是咱们想要的。
<hr/>
最终成果如下,次要成果曾经实现。当前会学习一下如何录制 gif
图的。
这次讲的跳转成果是所有页面的通用适度,下次会解说如何给两个组件设置独自的挑战成果。
如:在发现进入朋友圈页面上从左边划过,而从朋友圈返回时,发现是从右边滑动的成果