vue过渡&动画&Animate.css动画库1、前言在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很

1、前言

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

Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画，利用它们我们可以方便的实现过渡动画效果.

2、概述

<Transition> 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发：

由 v-if 所触发的切换
由 v-show 所触发的切换
由特殊元素 <component> 切换的动态组件

3、过渡的类名

一共有 6 个应用于进入与离开过渡效果的 CSS class。

过渡图示

v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

v-enter-active 和 v-leave-active 给我们提供了为进入和离开动画指定不同速度曲线的能力。以下是最基本用法的示例：

/* 元素进入和离开的动画 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}
/* 元素进入的初始状态，和元素离开的最后状态*/
.v-enter-from,
.v-leave-to {
  opacity: 0;
}

为过渡效果命名

我们可以给 <Transition> 组件传一个 name prop 来声明一个过渡效果名：

<Transition name="fade">
  ...
</Transition>

对于一个有名字的过渡效果，对它起作用的过渡 class 会以其名字而不是 v 作为前缀。比如，上方例子中被应用的 class 将会是 fade-enter-active 而不是 v-enter-active。这个“fade”过渡的 class 应该是这样：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

自定义过渡 class

你也可以向 <Transition> 传递以下的 props 来指定自定义的过渡 class：

enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class
你传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用，比如 Animate.css：

<!-- 假设你已经在页面中引入了 Animate.css -->
<Transition
  name="custom-classes"
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounceOutRight"
>
  <p v-if="show">hello</p>
</Transition>

三、Animate.css动画库

1、概述

Animate.css是一个现成的跨浏览器动画库，可用于web项目。非常适合强调、主页、滑块和注意力引导提示。

2、安装

$ npm install animate.css --save

将其导入到您的文件中：

import 'animate.css';

3、Animate.css用于自定义过渡类名

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <Transition
    leave-active-class="animate__animated animate__fadeOutLeft"
    enter-active-class="animate__animated animate__fadeInLeft">
    <div v-if="show" style="width:100px;height:100px;background-color: orange"></div>
    </Transition>
  </div>
</template>

注意：自定义过渡类名加Animate动画需要加前缀：animate__animated

4、自定义过渡类中使用Animate.css动画库并设置延迟效果

Class name	Default delay time
`animate__delay-2s`	`2s`
`animate__delay-3s`	`3s`
`animate__delay-4s`	`4s`
`animate__delay-5s`	`5s`

5、可以通过添加这些类来控制动画的速度

Class name	Default speed time
`animate__slow`	`2s`
`animate__slower`	`3s`
`animate__fast`	`800ms`
`animate__faster`	`500ms`

也可以自定义class设置动画的时间