vue2的css 动画库的基本使用方式

初级css动画库的使用 一、前言二、本次使用的CSS动画库三、Vue2的基础应用知识1. 一个组件和六个类名（1）一个组件（2）六个类名 四、CSS动画库的基础应用1.animate.css动画库（1）安装（2）一个小案例A、代码B、运行图 2.animate.css动画库（1）.安装（2）.一个小案例A.引用B.代码C.效果 总结

一、前言

本篇文章主要针对于初次接触css动画库的萌新工程师，在这我会以简单易懂的语言向你介绍css动画库，让你初步了解、使用css动画库。但愿你能听懂

二、本次使用的CSS动画库

本次要用到的数据库是: animate.css.和

三、Vue2的基础应用知识 1. 一个组件和六个类名

在使用动画库之前这是我们应该了解的基础知识，至于它是用来做什么的，就让我们将目光投向vue官方文档

（1）一个组件

这是官方对 transition这个组件的介绍，看不懂也没有关系，现在你只需要知道把要用动画的对象，放入transition这个组件中就好

（2）六个类名

同上，这是官方对动画过渡中，六个class 切换的介绍
简单来说就是：

v-enter：进入(显示)开始时的状v-enter-active：进入(显示)过程中的状态v-enter-to：进入(显示)结束时的状态v-leave：离开(隐藏)开始时的状态v-leave-active：离开(隐藏)过程中的状态v-leave-to：离开(隐藏)结束时的状态

更加形象一点：

这就是我对这六个class的理解，希望看完后你能理解。如果你再不明白那我也没办法了

四、CSS动画库的基础应用

没错经过Vue2基础知识的洗礼，你已经获得使通往css动画库的钥匙了。接下来就让我们进入正题，来学习如何使用动画库吧。

1.animate.css动画库

首先是 Animate.css，这个动画库很齐全，大部分人都知道，最著名的动画库之一，animate.css官网链接.

进去后首页就是这个样式，右侧是不同的类对应的不同的动画效果，想要的效果在这里，基本都可以实现。

（1）安装

简单来说就是先在集成终端中 npm install animate.css --save 然后在main。js中引入 import ‘animate.css’;
再之后就可以使用动画库中的类了。

（2）一个小案例 A、代码

B、运行图

最后看完代码肯会有疑惑的地方，那就是对类名 animate__animated animate__zoomIn 不明白。但是没有关系。我给大家放一张经过谷歌翻译的官方图大家就明白了

简单来说就是类名必须有 animate__animated 而且每个动画类前面必须加 animate__ 前缀。

2.animate.css动画库

与 animate.css 相比它的特色动画，如魔法效果，愚蠢的效果和炸d效果十分出众和特别

（1）.安装

或在: 官网下载

（2）.一个小案例 A.引用

在 main.js 引入css文件

B.代码

C.效果

总结

这就是动画库的基础使用，希望它能为你排忧解难。话说这玩意真能帮人解决问题吗？