Vue前端开发：animate.css第三方动画库

在实际的项目开发中，如果自定义元素的动画，不仅效率低下，代码量大，而且还存在浏览器的兼容性问题，因此，可以借助一些优秀的第三动画库来协助完成动画的效果，如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代码

<template><div class="action"><div class="act"><input type="button" @click="startTrans()" :value="blnShow ? '隐藏动画' : '显示动画'"></div><transition name="animate__animated animate__bounce"enter-active-class="animate__swing"leave-active-class="animate__backOutUp"><div class="mytrans" v-if="blnShow"></div></transition></div>
</template><script>
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库是开源的，安装后就已下载到本地文件中，如果需要修改某个动画效果，也可以找到源文件，直接修改相应样式代码。