Vue3过渡&动画：animate.css、gsap库

如果我们手动一个个来编写这些动画，那么效率是比较低的，所以在开发中我们可能会引用一些第三方库的动画库， 比如animate.css。官网：https://animate.style/

什么是animate.css呢？

        Animate.css is 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库

官网：https://greensock.com/

某些情况下我们希望通过JavaScript来实现一些动画的效果，这个时候我们可以选择使用gsap库来完成。

什么是gsap呢？

        GSAP是The GreenSock Animation Platform（GreenSock动画平台）的缩写；

        它可以通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且是浏览器兼容的；

这个库应该如何使用呢？

        第一步：需要安装gsap库；

        npm install gsap

        第二步：导入gsap库；

        在使用gsap的vue页面添加：import gsap from 'gsap';

        第三步：使用对应的api即可；

JavaScript钩子

在使用动画之前，我们先来看一下transition组件给我们提供的JavaScript钩子，这些钩子可以帮助我们监听动画执行到 什么阶段了

当我们使用JavaScript来执行过渡动画时，需要进行 done 回调，否则它们将会被同步调用，过渡会立即完成。

添加 :css="false"，也会让 Vue 会跳过 CSS 的检测，除了性能略高之外，这可以避免过渡过程中 CSS 规则的影响。（使用javascript动画时 一般添加）

gsap库的使用

那么接下来我们就可以结合gsap库来完成动画效果：

案例

1. gsap实现数字变化

在一些项目中，我们会见到 数字快速变化的动画效果 ，这个 动画可以很容易通过gsap来实现 ：

官方给的例子带计算属性

也可以不用计算属性