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

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

2022.09.20 23:38 123浏览
模块名
描述
课程名称
前端工程师2022版
课程章节
vue基础入门(中)
打卡知识进程
知识进程:16/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.20 23:37
学习结束时间
2022.09.20 00:00
总计时
23 min
课程收获

我们始终围绕是什么+为什么+怎么用
来输出所学收获
使用 transition 标签实现单元素组件的过渡和动画效果(2)
学习感受/感想/领悟(心得)
最近项目忙着交付上线,为了提高效率,我开始思考如何总结工作流SOP?

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

vue基础入门(中)

2-3 使用 transition 标签实现单元素组件的过渡和动画效果(2)

接着学习如何使用transition这个标签,‍‍帮助我们实现单组件或者单元素的动画效果。‍‍

这里面我们之前写的动画或者过渡效果,是在transition里面使用了一个div标签,我们用v-if来控制 div的存在与否,
其实这里我也可以给它改成v-show,这个时候 div的展示和隐藏,实际上‍‍它是通过css里面的display-hidden或者display-block来控制的,

虽然你看起来是隐藏的,但是让div标签通过v-show去用它的时候,即便它隐藏的情况下,div标签还是存在的,‍‍这是它和v-if的一个区别,

那么我们看如果用v-show这样的语法能不能实现动画效果?
也可以。

我们看到的这种动画效果,除了我可以用v-show来控制标签的展示或者隐藏,还可以用v-if它俩都行,

接着我们继续来讲,我们说 transition上面你可以使用hello来去对class的名字做一些修改,比如说你写了hello之后,‍‍你的这些固定的class名字都要以hello开头,你除了使用hello之外,你还可以这么去写,不用这个name等于hello了,你可以自己去定义。‍‍

比如说我们可以写enter-from-class,代码示例如下:

我可以自己去定义所有的‍‍这种class对应的名字,比如说叫hello-leave-active

代码示例:

我写一个‍‍enter-active-class,也就是在进入入场动画执行的整个过程中,我用的 class的名字叫做hello。‍‍

如果你这么写的话,上面你就可以不写这么长的一个样式了,直接写什么就行了,直接写hello就行了,表示入场:

hello-leave-active是出场,我应该改下面这个东西。‍‍

出场的动画我们怎么写,我们就写一个bye。‍‍

在下面你也要这么去定义:

leave-active-class="bye"

意思就是‍‍出场的动画执行的过程中,你用的 class 名字叫做什么?叫做bye。上面你把改成bye就可以了,‍‍【第19行】

我可以不按照它写的这种样式去定义 class 的名字:

我可以通过这种‍‍enter-active-class="hello"的方式自己去定义入场动画出场动画对应的css class的样子是什么。‍‍

enter-from-class="hello"就会有enter-to-class

就是你结束的时候你用什么样的class。

leave也是一样的,它会有leave-from-class

还有一个leave-to-class,也就是出场的动画结束的时候,你会用哪一个class作为它的样式。

这几个语法实际上就是我们自定义动画的class 名字可以通过这种方式进行自定义:

自定义class的名字有什么好处?
实际上使用这种自定义的class名字,‍‍我们可以去做一些非常复杂的css动画,而且可以使用一些第三方的 css 动画库。‍‍

我来给大家举一个例子,我现在打开了一个网站:
https://animate.style/

这是一个css的动画效果库,比如说它会告诉我们一些动画效果怎么用,我直接带大家来用就好了。‍‍

首先你要用它,你先引入它的 css 样式,我复制一下它的样式代码,‍‍用一个cdn上面的样式文件到我的代码里面来:

然后在 meta 标签下面加一个 animate css的样式引用:

怎么去用这个库,它会告诉我们:

如果你想让一个 html 标签有动画效果的话,你可以直接增加一个 animate__animated,告诉ta我现在要有一个动画效果了,‍‍具体执行哪一个动画,后面跟一个animate__bounce,意思就是执行一个跳跃的动画,‍‍

这么去写你写的元素就会有一个动画效果,那么这个东西怎么在Vue里面做结合?‍‍‍‍

现在我们不需要自己去写这些样式了,不用自己写这种动画,‍‍我们的动画库都引入哪里的动画库,都引入了animate.css对应的动画库,那么我们可以直接这么写:

当用户去让div标签展示或者隐藏的时候,我执行的动画就是什么?‍‍【看第32行】,

我们也用一个这种弹性的动画,前面跟一个animate__animated必须要有,指的是‍‍我要执行动画,在整个动画的执行过程中它必须得有样式,‍‍那么既然在整个动画执行的过程中必须得有样式,我自然就要把它写到哪里去呢?‍‍写到enter-active-class="animate__animated animate__bounce"enter-active-class指的是整个transition这个动画,‍‍执行的整个过程中都会有样式,正好就有哪个样式就有 animate__animated的样式,

当然animate__bounce在整个动画执行过程中也需要有,所以我要把它写在animate__animated后面。‍‍

同样的‍‍在出场动画的时候,我也要有一个弹性的动画,所以这两个样式"animate__animated animate__bounce"我也写在这:

这个时候相当于我们用的这些动画效果实际上不是自己写的,而是直接用的第三方的animate.css这样的一个css 动画库。

animate.css里面其实还提供了很多的动画效果,大家可以读一下它的文档:

比如说他有bounce还有flash,我们可以写一下flash,前面的都不动:

flash会带有闪烁的效果。
transtion:过渡

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

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

评论

作者其他优质文章

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

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

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

风间影月说签约讲师

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

进入讨论

Tony Bai 说签约讲师

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

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

举报

0/150
提交
取消