为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第18天 vue基础入门(中)

【九月打卡】第18天 vue基础入门(中)

2022.09.22 22:29 62浏览
模块名
描述
课程名称
前端工程师2022版
课程章节
vue基础入门(中)
打卡知识进程
知识进程:18/20
✔ (1)1-1 组件的定义及复用性,局部组件和全局组件(1)
✔(2)1-2 组件的定义及复用性,局部组件和全局组件(2)
✔(3)1-3 组件间传值及传值校验
✔ (4)1-4 单项数据流的理解
✔(5)1-5 Non-Props 属性是什么
✔(6)1-6 父子组件间如何通过事件进行通信(1)
✔(7)1-7 父子组件间如何通过事件进行通信(2)
✔(8)1-8 组件间双向绑定高级内容(选学)
✔(9)1-9 使用插槽和具名插槽解决组件内容传递问题(1)
✔(10)1-10 使用插槽和具名插槽解决组件内容传递问题(2)
✔(11)1-11 作用域插槽
✔(12)1-12 动态组件和异步组件
✔(13)1-13 基础语法知识点查缺补漏
✔(14)2-1 使用 Vue 实现基础的 CSS 过渡与动画效果
✔(15)2-2 使用 transition 标签实现单元素组件的过渡和动画效果(1)
✔(16)2-3 使用 transition 标签实现单元素组件的过渡和动画效果(2)
✔(17)2-4 使用 transition 标签实现单元素组件的过渡和动画效果(3)
✔(18)2-5 组件和元素切换动画的实现
(19)2-6 列表动画
(20)2-7 状态动画
主讲老师
Dell
学习开始时间
2022.09.22 21:23
学习结束时间
2022.09.22 22:27
总计时
64 min
课程收获

我们始终围绕是什么+为什么+怎么用
来输出所学收获
组件和元素切换动画的实现
学习感受/感想/领悟(心得)
开发的时候,问问自己,场景是什么?

课程内容:
2022.09.22的学习内容:

vue基础入门(中)

2-5 组件和元素切换动画的实现

之前我们学习了如何使用transition这个标签 来实现一个单元素或者单组件的动画效果。

这节课我再带大家去学习如何用transition这个标签,‍‍实现多个单元素或者多个单组件之间的相互切换 这个过程中的动画。‍‍

什么意思?
示例代码:

代码解读:

这里面首先有一个hello world,我们再写一个bye world, hello world和bye world 它俩的显示‍‍我们通过v-if等于show,
v-else来做一个控制,

如果show是true的话展示 hello world,‍‍如果show是false的话,展示的就是bye world。

接着我们写了一个handleClick方法:

每次对show进行取反,‍‍我们可以看到这个时候transition里面放了两个元素,一个是hello world,一个是bye world,‍‍

然后这两个元素是通过show来控制它俩之间的切换的,

点击切换就变成hello world,再点击 变成bye world:

那么实际上这就是两个单元素之间的切换,‍‍之前我们第一个元素是 hello world元素,第二个元素是bye world元素,它俩之间要做一个单元素的切块,‍‍我把它放在 transition 里面:

如果我想让单元素的这种切换有一些动画效果,大家可以看到现在transition也写了,‍‍但是这两个单元素切换的时候并没有动画效果,它俩如果像有动画效果可以怎么写呢?‍‍

我们只需要在这写一个,比如说入场的时候 .v-enter-from 也就是说做这两个元素切换的时候,有一个元素要展示,一个元素要隐藏。
示例代码:

展示的元素 动画也是要写v-enter-from的,

刚开始要展示的时候,我让它的opacity可以变成0,‍‍
然后当它在展示的过程中 v-enter-active,‍‍我让ta的 transition给它三秒 ease-in,

然后在一个v-enter-to‍‍,

彻底进入到这个动画结束的这个过程的时候,动画结束了,我让它的opacity变成 1,

也就是做切换的时候马上要展示的组件,‍‍它会有一个动画效果,比如说show变成true的时候, hello world组件,它会有一个动画效果,

当show是false的时候,bye world要展示,by world这个元素也会有一个动画,入场动画就实现了。‍‍

我们再写一下出场的动画,v-leave-from,

当出场的时候,这一瞬间它的‍‍ opacity 一开始应该是一:

然后出场动画其实也是一样的,和入场动画的 v-enter-active 的写法‍‍它是一样的,我们把v-enter-active变成v-leave-active,在出场的时候也是对 opacity 进行修改‍‍,出场结束的时候,我应该说它的v-leave-to,也就是说它结束的时候,‍‍它的 opacity 应该变成多少?

变成0:

这么去写,我们看两个单元素之间做切换展示的时候,会不会有过渡的一个动画效果?‍‍刷新一下,‍‍点击切换:

你发现一个展示有动画效果,一个隐藏有动画效果。‍‍

其实这两个动画效果基本上是看起来好像是一起在执行的,

你看都执行完了,‍‍然后整体的动画效果再结束,‍‍但是有的时候一般来说我们不会让这个东西做这种切换,一般都是希望比如说你hello world处于一个状态,我点切换的时候‍‍ hello world先隐藏bye world再展示,而不是说一边隐藏一边展示,这个时候可以怎么办?‍‍

如果你‍‍希望实现效果的时候,transition上面你可以写一个mode 等于先是out-in,意思就是‍‍你先隐藏再展示,先出去再进来。‍‍

这么写完了这个模型之后,我们再去看一下,大家看先隐藏,‍‍再展示:

我们也可以比如说先用in-out,那就是先进来再隐藏,‍‍点击大家看它先进来,然后再慢慢的隐藏:

这是 in-out和out-in的一个区别:

但如果你不写的话,这个动画的效果是什么样子的呢?

大家可以看,‍‍它是两个应该是一起执行的动画:

如果你什么都不写 就一起执行,
如果in-out先入再出,
如果out-in是先出再入。‍‍

通过这样的 transition标签,对两个单元素进行一个包裹,

我们就可以‍‍再配合一些样式来实现单个元素之间相互切换过程 来实现 切换效果。‍‍‍‍

但是其实这块还是有一个小问题,我一开始刚进入的时候bye world是展示的,‍‍我希望刚进来的时候bye world一开始就可以有一个动画效果,

我点击切换‍‍变成 hello world,然后之后再点切换的时候,这个bye world才有动画,‍‍但是如果我第一次直接刷新页面,进到这个页面的时候,by world没有动画,‍‍如果你希望刚进入页面,bye world的展示也有一个动画,‍‍这个时候其实也非常的简单,你只需要在transition这个标签加上appear这样的属性就可以了:

它的意思是我初次对某一个默认元素进行显示的时候,也会给它带上我们写的这种动画效果,‍‍我们写了appear之后保存,再到页面上刷新:

大家看第一次进入的时候,bye world也会有一个渐入的效果了,‍‍点击或隐藏,当然时间比较慢,因为我上面的动画时长写的是三秒,有点长了我可以写成一秒:

这样的多个单元素标签之间的切换,我们通过 transition标签可以实现:

其实除了多个单元素标签的切换之外,‍‍

然后我们再写一个‍‍多个单组件之间的切换。‍‍我们看一下多个单组件之间的切换,‍‍其实也可以用transition来帮助我们实现切换过程的动画效果。‍‍

首先我在这里去写两个组件,我们定义两个组件,比如说‍‍:

我用子组件怎么用?

是不是components 然后我们写一个对象:

然后:

现在把标签换成组件,‍‍做多个单组件之间的切换,也是可以实现这种动画效果的,只需要在外层加一个transition就可以了。‍‍
mode与appear它的作用是一模一样的,‍‍但组件做切换的时候,‍‍你除了可以使用这种写法之外,之前我们讲了一个动态组件,

我们还可以直接去用component这样的标签,‍‍然后这么去写:


is等于一个变量,变量 我们就叫做component这块绑定一下,‍‍
我们在上面就要定义这个变量,你用一个动态组件的方式去写:

这个时候你除了使用 v-if 、v-else这样的语法之外,如果你用is语法,‍‍也一样的能实现动画效果。‍‍

在做多个单组件之间的相互切换动画的时候,‍‍我们除了可以使用v-if、v-else这样的指令之外,我们还可以使用component‍‍ :is这样的语法,

通过动态组件的形式来实现这样的多个单组件之间切换的动画效果。‍‍

点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Python工程师
手记
粉丝
16
获赞与收藏
62

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

145篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消