一、animate.css
1、什么是animate.css?
Animate.css是一个已经准备好的、跨平台的动画库为我们的web项目，对于强调、主页、滑动、注意力引导 非常有用
2、如何使用animate.css？
第一步：安装animate.css
方法：npm install animate.css
第二步：导入animate.css库
方法：import "animate.css"
注意：建议在main.js文件中导入
第三部：使用animation动画或者animate提供的类
animate.css官网：https://animate.style/
右侧就是animate.css为我们定义的动画名字
(1) 、animate.css第一种用法：
注意：需要结合transition这个内置组件使用
（2）、animate.css第二种用法
想添加哪个动画就点击右边的复制 就可以把这个动画的类名复制下来
注意：自定义class优先级更高
二、gsap库的使用
某些情况下我们希望通过JavaScript来实现一些动画的效果，这个时候我们可以选择使用gsap库来完成。
1、什么是gsap？
GSAP是The GreenSock Animation Platform（GreenSock动画平台）的缩写；
它可以通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且是浏览器兼容的；
2、如何使用gsap
第一步：安装gsap
方法：npm install gsap
JavaScript钩子
在使用动画之前，我们先来看一下transition组件给我们提供的JavaScript钩子，这些钩子可以帮助我们监听动画执行到
什么阶段了。
注意：这是transition组件为我们提供的javascript钩子，transition组件在帮我们执行动画的时候会执行这些钩子
第二步：引入gsap库
方法：import gsap from 'gsap’
第三部：使用对应的api
当我们使用JavaScript来执行过渡动画时，需要进行 done
回调，否则它们将会被同步调用，过渡会立即完成。所以onComplete:done必须写，onComplate:done的主要作用是告诉transition组件
当前这个动画执行完了
注意：添加 :css=“false”，也会让 Vue 会跳过 CSS 的检测，除了性能略高之外，这可以避免过渡过程中 CSS 规则的影响。
:css=“false” 可以让style中写的动画失效
gsap实现数字递增的效果（小案例）
上边这个小案例中的computed属性也可以不写 可以直接{ {showNumber}} 这样直接展示showNumber
三、列表的过渡
注意：transition-group也是内置组件
1、列表过渡的基本使用
2、v-move
只要transition-group包裹的元素内容发生变化 都会添加v-move这个类名
2、打乱上边数字的顺序
首先引入一个库 lodash
安装：npm install lodash
引入：import _ from 'lodash’
四、列表的交错过渡案例
