如果我们手动一个个来编写这些动画，那么效率是比较低的，所以在开发中我们可能会引用一些第三方库的动画库，比如animate.css。官网：https://animate.style/
什么是animate.css呢？
Animate.cssis a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
Animate.css是一个已经准备好的、跨平台的动画库为我们的web项目，对于强调、主页、滑动、注意力引导 非常有用；
如何使用Animate库呢？
第一步：需要安装animate.css库；
第二步：导入animate.css库的样式；
第三步：使用animation动画或者animate提供的类；
1. 自定义过渡class
我们可以通过以下 attribute 来自定义过渡类名：
enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class
他们的优先级高于普通的类名，这对于Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css. 结合使用十 分有用。
2.animate.css库的使用
安装animate.css：
npm install animate.css
在main.js中导入animate.css：
import "animate.css"
接下来在使用的时候我们有两种用法：
用法一：直接使用animate库中定义的 keyframes 动画；
用法二：直接使用animate库提供给我们的类；
去animate官网https://animate.style/复制要使用的动画，reverse为反转动画
.why-enter-active {animation: bounceInUp 1s ease-in;}.why-leave-active {animation: bounceInUp 1s ease-in reverse;}
二、认识gsap库
官网：/
某些情况下我们希望通过JavaScript来实现一些动画的效果，这个时候我们可以选择使用gsap库来完成。
什么是gsap呢？
GSAP是The GreenSock Animation Platform（GreenSock动画平台）的缩写；
它可以通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且是浏览器兼容的；
这个库应该如何使用呢？
第一步：需要安装gsap库；
npm install gsap
第二步：导入gsap库；
在使用gsap的vue页面添加：importgsapfrom'gsap';
第三步：使用对应的api即可；
JavaScript钩子
在使用动画之前，我们先来看一下transition组件给我们提供的JavaScript钩子，这些钩子可以帮助我们监听动画执行到 什么阶段了
当我们使用JavaScript来执行过渡动画时，需要进行 done 回调，否则它们将会被同步调用，过渡会立即完成。
添加:css="false"，也会让 Vue 会跳过 CSS 的检测，除了性能略高之外，这可以避免过渡过程中 CSS 规则的影响。（使用javascript动画时 一般添加）
gsap库的使用
那么接下来我们就可以结合gsap库来完成动画效果：
案例
1.gsap实现数字变化
在一些项目中，我们会见到数字快速变化的动画效果，这个动画可以很容易通过gsap来实现：
官方给的例子带计算属性
也可以不用计算属性
