Vue-Animate与Transition组件

---

前言

在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验：

1.React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group；

2.Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果；

---

一、安装

animate.css网址,推介安装最新版本(3.7.2)

1. 安装：

 npm install animate.css@3.7.2 --save

2. 在main.js中全局引入：

import animated from "animate.css"
Vue.use(animated)

二、使用

1. 在标签上加上animated 及 动画名称：

代码如下（示例）：

<transition name="fade"
                    enter-active-class="animated swing "
                    leave-active-class="animated shake "
        >
            <div v-if="show">hello world</div>
</transition>

注：animated 类似于全局变量，它定义了动画的持续时间,默认1s；swing是动画具体的动画效果的名称，你可以选择任意的效果。

必须使用enter-active-class和leave-active-class

运行结果

2.同时使用过渡和动画

代码如下（示例）：

<transition name="fade"
                    type="transition"
                    :duration="{enter:5000,leave:10000}"
//enter和leave分别为入场动画和出场动画的时间
                    appear
                    enter-active-class="animated swing fade-enter-active"
                    leave-active-class="animated shake fade-leave-active"
                    appear-active-