文章目录

前言一、animate.css是什么？二、使用步骤1.引入库1.1、在工程项目中引入1.2、在html文件引入

2.使用方法

三、dom

前言

随着前端界面需求以及内容友好度的提高，一个好看的动画往往显得非常重要，接下来我们就来介绍一下如何在HTML以及工程项目中使用animate.css动画库

提示：以下是本篇文章正文内容，下面案例可供参考

一、animate.css是什么？

是一个前端的动画库，animate.css官网

二、使用步骤

1.引入库

1.1、在工程项目中引入

用npm安装

npm install animate.css --save

在js代码中引入即可(这里我推荐在main.js中引入，这样就可以在整个工程文件中使用啦)

//main.js

improt import 'animate.css';

1.2、在html文件引入

在head中

2.使用方法

在 transition 标签中给对应动作的类名加上动画库中的类就行啦。 leave-active-class 消失时候的效果动画 enter-active-class 显示时候的效果动画 其次需要注意的是，在添加动画前需要在动画名前加入animate.css的前缀animate__animated 代码如下（示例）：

值得注意的是：需要将要使用动画的标签或组件加入到 transition标签当中、其次加入的标签需要有显示或者不显示的触发，比如v-if条件满足就显示...

三、dom