深圳建网建网站广州专门做网站

---

前言

提示：干货篇，不废话，点赞收藏，用到会后好找藕~

---

点击这里，直接看官网哦 👉 官网地址：https://animate.style/

一、下载或安装

npm 安装

总共两种方式，咱们先说最主流的npm方式，使用命令行直接敲

//添加动画依赖文件
npm install animate.css

二、引入组件

咱们直接在main.ts中填入这两句,视情况而定，如果一会儿没效果，就直接删除第一条，切换为第二个。

import 'animate.css';//方案一
// import 'animate.css/animate.min.css' //方案二

三、复制使用

点击这里，边看边用哦 👉 animate.css官网地址

咱们进入到官网里面后，通过点击右侧列表可以预览动画的效果，通过点击右侧的图标即可复制这一条动画的类名，然后直接粘贴到咱们需要使用的div或者容器的class中即可

注意：每一个需要动画的class中都需要额外添加 animate__animated，否则动画不生效，如下图所示

四、完整使用演示

这里用了高清的动图大家可以参考一下

---

总结

例如：这里主要讲解vue3项目的配置额使用，如果需要vue2、uniapp、微信小程序等的使用教教，请在下方留言或者直接私信我哦，我光速补充，爱你们❤️