vue3项目引入animate.css教程

0、项目背景：vue3 + vite + typescript

以下是项目使用的版本

"vue": "^3.0.4",
"typescript": "^4.4.4",
"vite": "^2.6.14"

1、安装animate.css

npm i animate.css

安装完毕之后可以在package.json查看安装的版本，下图是本次安装的版本：

"dependencies": {
    
    
    "animate.css": "^4.1.1"
}

2、引入animate.css

在vue项目的main.ts中将动画库引入

// 引入动画库
import "animate.css"

3、使用

非常简单，直接给需要加动画的html加上对应的类名即可，例如：

<div class="animate__animated animate__fadeInDown"></div>

更多的动画，请参考animate官方地址：https://animate.style/

4、注意踩坑点

因为安装的animate版本是4.x，使用时要注意对应的所有类名都以animate__开头，并且还要配合animate__animated一起使用！