animate.css的简单使用

animate.css是很多前端开发都知道的一个基于css3 animation动画库，库中预设的动画效果几乎满足了所有日常开发中的需求，本文对animate.css作简单介绍。

官网可以查看类名对应的动画效果。

---

引入

1、在线CDN

2、下载到本地 下载地址 https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

3、npm安装  npm i animate.css -S -D

---

使用

简单使用只需要在标签上添加animated类名和对应动画类名

大江东去浪淘尽

打开animate.css文件源码，我们可以看到文件里预定义了很多动画效果，除此之外还定义了一些公共class。

动画类及无限循环动画

animate.css预设动画执行时间为1秒且只执行一次，如果需要无限执行动画只需添加infinite类。

大江东去浪淘尽

相信很多小伙伴也发现了，我们可以更改css源码来适应我们的需求。

比如更改动画执行周期

动画执行周期3s

再往下看我们会发现作者还预设了动画延迟class，目前最新版本预设了从1到5的整数秒级延迟

延时一秒与两秒的类

我们只需添加 delay-xs类名（x为1到5的整数）来为我们的动画添加延时执行效果。

大江东去浪淘尽

关于延迟效果也有语义化的类名 分别为faster、fast、slow、slower,它们对应的延迟效果分别为500ms,800ms,2s,3s。

tip: 动画执行次数属性为animate-iteration-count: n;（n为动画具体执行次数，值为正整数）

---

关于动态添加删除动画效果

原生JS核心代码

    dom.classList.add('animated');   // 添加

    dom.classList.add('bounceOut');  // 添加

    dom.classList.remove('animated');  // 删除

jquery

    $('#dom').addClass('animated bounceOut');  // 添加

    $('#dom').removeClass('bounceOut');  // 删除

vue

    在data中声明isAnimate和isBounOut，值为Boolean类型。

    

大江东去浪淘尽

    在对应的需要改变动画有无的事件或逻辑里修改isAnimate和isBounOut的值。

---

animate.css简介就写到这，度娘里已经前辈们更全的总结，此篇给自己和第一次打算使用animate.css库的同胞们。