上海优质网站seo有哪些,wordpress调用同分类最新文章,局部翻新装修公司,亳州网站建设费用在实际的项目开发中#xff0c;如果自定义元素的动画#xff0c;不仅效率低下#xff0c;代码量大#xff0c;而且还存在浏览器的兼容性问题#xff0c;因此#xff0c;可以借助一些优秀的第三动画库来协助完成动画的效果#xff0c;如animate.css和gsap动画库#xff…在实际的项目开发中如果自定义元素的动画不仅效率低下代码量大而且还存在浏览器的兼容性问题因此可以借助一些优秀的第三动画库来协助完成动画的效果如animate.css和gsap动画库前者使用样式后者通过JavaScript来实现动画效果。今天先给大家分享animate.css知识如果有所帮助大家点点关注支持一下也可以联系上我一起学习。 animate.css是一个使用CSS样式实现动画效果的第三方库文件它包含各类动画效果如强调、切换和引导等同时它能很好地兼容各大浏览器可以很方便地快速运用到各个Web项目中在使用animate.css动画库之前需要先在在项目文件夹下输入如下指令。
npm install animate 安装成功后在需要使用该动画效果的组件中导入该库文件代码如下。
import animate.css; 导入成功后就可以在组件的模板元素中使用动画库的类别样式了接下来通过一个示例来演示animate.css 库在组件中的使用过程。 实例5-4 应用动画库中样式
1. 功能描述
在上述示例5-1的基础上当单击按钮时通过应用第三方动画的样式实现元素以反弹跳跃的方式隐藏以上下摇摆的方式显示。
2. 实现代码
在项目components 文件夹的ch5子文件夹中添加一个名为“PlugAnimate”的.vue文件在文件中加入如清单5-4所示代码。
代码清单5-4 PlugAnimate.vue代码
templatediv classactiondiv classactinput typebutton clickstartTrans() :valueblnShow ? 隐藏动画 : 显示动画/divtransition nameanimate__animated animate__bounceenter-active-classanimate__swingleave-active-classanimate__backOutUpdiv classmytrans v-ifblnShow/div/transition/div
/templatescript
import animate.css;
export default {name: PlugAnimate,data() {return {blnShow: true};},methods: {startTrans() {this.blnShow !this.blnShow;}},
};
/script
style
.action .act {margin: 10px 0;
}.action .act input {width: 80px;height: 32px;
}.mytrans {width: 200px;height: 30px;background-color: #ccc;
}
/style
3. 页面效果
保存代码后页面在Chrome浏览器下执行的页面效果如图5-5所示。
4. 源码分析
在上述示例的代码中首先向动画组件添加两个动画名称分别是animate__animated和 animate__bounce前者是一个类似于全局变量它定义了动画的持续时长;后者则是一个动画具体的效果名称示例中的bounce为反弹效果
然后再设置动画进入和离开时的类别样式animate__swing和animate__backOutUp通过这些动画样式实现需求中的动画效果由于animate.css库是开源的安装后就已下载到本地文件中如果需要修改某个动画效果也可以找到源文件直接修改相应样式代码。
