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一起使用!

Logo

前往低代码交流专区

更多推荐