【Vue.js 入门与实战】--动画-使用第三方animate.css类库实现动画

简介: 一、animate.css类库实现动画

动画-使用第三方animate.css类库实现动画

 

一、animate.css类库实现动画

新建05动画-使用第三方类实现动画

image.png

可以看到,此时是没有任何动画效果的。

了解animate.css,提供了好多常见的动画效果,在0304中,学会了如何进场和立场,但是有一些特效不好实现。于是我们可以借助第三方animate.css来帮助我们实现,特殊的出场和离场动画,提供的样式更加丰富些。

image.png

在框内选择各种效果,可以看到字体显示了该种类对应的动画。

先设置出场和离场动画:

<!-- 入场bounceIn     离场bounceout-->

在使用了第三方animate.css后,我们就不需要写V-等。

transition enter -active-class=bounceInleave-active-classbounceOut”>

其中,enter -active-class,表示进入时间段,这个时间段用bounceIn这个动画;

leave-active-class,表示出场时间段,这个时间段用bounceOut这个动画;

点击,我们会发现,并没有任何效果。原因在于入场和出场之前,我们需要新加一个类,叫“animated”,代码如下:

transition enter -active-class=bounceInleave-active-classbounceOut”:duration=200”>

 

h3 V-if=flagclass=animated”>只是一个H3/h3

/transition

!--使用:duration“毫秒值”来统一设置入场和离场时候的动画时长--

/div

这是发现,动画可以正常使用了。“animated”可以写一次,也可以写两次。经过实践发现,写一次也可正常启动动画。

acript

//创建Vue 实例,得到 Viewmodel

el:’lapp,

data:(

flag:false

},

Methods:{}

}};

transition

enter-active-class=“bounceIn

leave-active-class=“bounceOut

;duration=”(enter:200,leave:400}”>

h3 V-if=flagclass=animated”>只是一个H3/h3

/transition

/div

Duration,是为动画指定特定时间,使用其可以统一设置“入场”和“离场”的动画时长。使用Durationduration=(enter:200,leave:400},来分别设置入场的时长和离场的时长。此时刷新,发现动画的出现明显的慢了一些。

 

 

相关文章
|
25天前
|
存储 安全 API
Next.js 实战 (九):使用 next-auth 完成第三方身份登录验证
这篇文章介绍了next-auth,一个为Next.js设计的身份验证库,支持多种认证方式,如电子邮件和密码、OAuth2.0提供商(如Google、GitHub、Facebook等)以及自定义提供商。文章包含了如何配置Github Provider以及会话管理,并提到了适配器Adapters在next-auth中的作用。最后,文章强调了next-auth的强大功能值得进一步探索。
65 10
|
1天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
19 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
24天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
110 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
23天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
51 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
25天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
73 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
115 24
|
2月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
2月前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
57 3
|
3月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
3月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载

热门文章

最新文章