【vue3项目使用 animate动画效果】
vue3项目使用 animate动画效果
- 前言
- 一、下载或安装
- npm 安装
- 二、引入组件
- 三、复制使用
- 四、完整使用演示
- 总结
前言
提示：干货篇，不废话，点赞收藏，用到会后好找藕~
点击这里，直接看官网哦 👉 官网地址：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、微信小程序等的使用教教，请在下方留言或者直接私信我哦，我光速补充，爱你们❤️
