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

一、前言

本篇文章主要针对于初次接触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：离开(隐藏)结束时的状态<