vue3-动画之结合第三方库的使用

一、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’

四、列表的交错过渡案例