Vue 过渡 & 动画

本章节我们主要介绍 Vue.js 的过渡效果与动画效果。包括如何编写自定义 CSS 动画、如何配合第三方 CSS 动画库、过渡钩子函数的使用、如何使用第三方 JavaScript 动画库。本小节的内容相对之前有些难度，同学们在阅读一遍之后如果不能完全掌握，建议反复阅读，并把本小节的所有案例自己实现一遍，相信通过多次的练习一定可以掌握。

1. 过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

包括以下工具：

1、在 CSS 过渡和动画中自动应用 class；

2、配合使用第三方 CSS 动画库，如 Animate.css；

3、在过渡钩子函数中使用 JavaScript 直接操作 DOM；

4、配合使用第三方 JavaScript 动画库，如 Velocity.js。

语法格式：

使用 transition 组件包裹需要使用过渡效果的 DOM 元素。例如：

    <transition name = "transition-name">
      <div>...</div>
    </transition>

1.1 基本使用

接下来让我们先看一个淡入淡出效果的实现代码：