这是我参与「第四届青训营」笔记创作活动的第1天

一、Animate介绍

Animate是一个CSS的动画样式库，在里面有非常多炫酷的动画特效，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达70多种动画特效，适合快速使用，同时也方便进行按需修改。

二、具体使用

1、安装

npm命令安装：
执行npm i animate.css --save命令
yarn命令安装（适用于 Webpack、Parcel 等适当的工具）：
执行yarn add animate.css命令

2、导入

import导入:
import 'animate.css';
link标签导入：

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

3、基本用法

<h1 class="animate__animated animate__bounce"你好啊</h1>

4、Animate定制

使用自定义属性来定义动画的持续时间、延迟和迭代。

.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

同时也可以使用 javascript one-liner 获得慢动作或延时效果：

//设置所有动画都需要两倍的时间才能完成
cument.documentElement.style.setProperty('--animate-duration', '2s');
//设置所有动画都需要一般的时间才能完成
document.documentElement.style.setProperty('--animate-duration', '.5s');

三、总结

Animate动画库能够是我们更轻松的使用动画效果。并且在基础上定制我们需要的动画，同时在vue中使Animate，能够有效的、更方便快捷的达到自己的目的实现。

Animate动画库 | 青训营笔记