https://animate.style/动画库的官方网址。在首页可以看到各种动画的名称，点击一下可以预览动画的效果。
安装
有三种方式：npm
$ npm install animate.css --save
yarn：
$ yarn add animate.css
CDN 直接添加到网页：
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head>
用法：
在安装完成之后，简单的用法就是在一个标签上添加类，其中animate__animated是必须要添加的，然后就可以添加自己想要的动画效果了。注意一定要在动画名前添加animate__。
比如要使用弹跳bounce的动画效果就可以写成这样animate__bounce。
<script> const app = Vue.createApp({ template: ` <h1 class="animate__animated animate__rotateOut">An animated element</h1> <div class="animate__animated animate__flipInX">div块</div> ` })
const vm = app.mount("#app") </script>
在vue3中使用
结合了vue3中过渡&动画里的内容，自定义过渡 class 类名。
可以通过以下 attribute 来自定义过渡类名：
- enter-from-class
- enter-active-class
- enter-to-class
- leave-from-class
- leave-active-class
- leave-to-class
template: ` <transition enter-active-class="animate__animated animate__bounce" leave-active-class="animate__animated animate__bounce" > <div v-if="isShow">将要添加动画效果的dom元素</div> </transition> `