Animate是一个基于CSS3的动画库,集成了很多实用的动画。
引入Animate
引入Animate的方式有多种:
1、CDN
cdn的话可以自己去网上找,我一般的是CDN。复制了link标签或者是url地址后,以link标签的形式插入到项目的入口html文件index.html
。
2、npm
npm安装
使用webpack的时候,可以用npm安装
npm install animate.css --save-dev
引入文件
我们在main.js文件中引入animate
import 'animate.css';
或者
require('animate.css/animate.min.css');
使用说明
1、版本问题
在使用animate的时候一定要注意使用的是哪个版本的,因为在不同版本中类名可能会有细微的差别。所以在参照别人的教程学习的时候要注意这个情况,比如vue官网使用的3.5.1的animate,类名是以slide-in-left
的形式书写的,而我用的是3.5.2的,类名以slideInLeft
的方式书写,导致我反复试验以为是自己弄错了原理之类的,最后查看animate源码的时候才发现是版本的差别。
三级标题
四级标题
注: