---
title: 10-Vue动画
publish: true
---
## 前言
动画的作用：提高用户的体验，帮助用户更好的理解页面中的功能。
## 使用过渡类名实现动画
### 官方文档的截图
过渡类名如下：
动画进入：
- v-enter：动画进入之前的**初始**状态
- v-enter-to：动画进入之后的**结束**状态
- v-enter-active：动画进入的时间段
PS：第一、第二个是时间点；第三个是时间段。
动画离开：
- v-leave：动画离开之前的**初始**状态
- v-leave-to：动画离开之后的**结束**状态
- v-leave-active：动画离开的时间段
PS：第一、第二个是时间点；第三个是时间段。
### 使用举例（通过Vue的过渡类名来实现）
`v-enter-to`和`v-leave`的状态是一样的。而且一般来说，`v-enter`和`v-leave-to`的状态也是一致的。所以，我们可以把这四个状态写成两组。
现在我们来做个例子：点击按钮时，让div显示/隐藏。
**1、引入**：
如果我们不使用动画，应该是这样做：
```html
Document
这是一个H3
```
**2、使用动画**：（通过Vue的过渡类名来实现）
现在，我们加**淡入淡出**的动画，让div显示和隐藏。代码如下：
```html
Document
这是一个H3
```
上方代码中，我们使用vue提供的``标签把需要被动画控制的元素，包裹起来；然后使用`.v-enter`、`.v-leave-to`等进行动画的定义。
运行效果如下：
**3、再加一个 transform 属性进行位移**：
我们在上方代码的基础之上，加一个 transform 属性，让动画有一个位移的效果。完整代码如下：
```html
Document
这是一个H3
```
效果如下：
### 修改过渡类名的前缀
在上一小段中，`.v-enter`、`.v-leave-to`这些过渡类名都是以`v-`开头的。这样做，会有一个局限性：假设有两个DOM元素都用``进行了包裹，那这两个DOM元素就都具备了`v-`中所定义的动画。
那**如果我们想把两个DOM元素的动画进行分开定义**，该怎么做呢？这里，我们可以通过修改过渡类名的前缀来做。比如：
第一步：（自定义别名）
```html
这是一个H6
```
上方代码中，我们加了`name="my"`。
第二步：（我们就可以使用 `my-enter`、`.my-leave-to`这些类名了）
```css
.my-enter,
.my-leave-to {
opacity: 0;
transform: translateY(70px);
}
```
完整代码举例如下；
```html
Document
这是一个H3
这是一个H6
```
运行效果如下：
## 使用第三方animate.css类库实现动画
animate.css网址：
- 官方网站：
**代码举例**：
下面的代码中，我们使用animate.css提供的`bounceIn`、`bounceOut`这两个类来做入场、离场的动画。代码如下：
```html
Document
这是一个H3
```
上面的代码中，注意：
注意1：`enter-active-class`和`leave-active-class`这两个类名是Vue动画里的关键词，不能写成自己**随意起**的类名。
注意2：`bounceIn`、`bounceOut`这两个类不能直接使用，要在前面加上`animated`这个类；否则动画是不会生效的。当然，上面的代码中，我们还可以把`class = animated`这个代码移到``标签里，效果是一样的，如下：
```html
这是一个H3
```
运行效果如下：
**改进1**：（统一设置入场、出场动画的持续时间）
我们把上面的代码改进一下，如果我们想给入场、出场动画设置持续的时间，可以使用`:duration`来做。如下：
```html
这是一个H3
```
**改进2**：（分别设置入场、出场动画的持续时间）
```html
这是一个H3
```
## 钩子函数实现半场动画
只有出场动画、没有离场动画，这种就是属于半场动画。比如你把一件商品加入收藏，会出现一个动画；当再次点击收藏按钮的时候却看不到动画效果，这就说明，只有前一半才有动画。
半场动画，可以使用钩子函数来实现。
### 动画的钩子函数介绍
可以在属性中声明 JavaScript 钩子函数：（这八个钩子函数可以理解成是动画的生命周期）
```html
```
我们可以这样理解：上面这八个钩子函数（四个入场、四个离场），对应了八个事件，我们要紧接着在methods中定义八个函数。
如果要定义半场动画，做法是：直接在methods中写入场动画的函数，不写离场动画的函数即可。
### 举例：使用钩子函数模拟小球半场动画
现在要实现的例子是：点击按钮后，让小球进行移动。完整代码如下：
```html
Document
```
运行效果如下：（我们可以用这种动画效果，做类似于“加入购物车”的动画效果）
上面的代码中，有两个地方要注意：
**注意1**：
`el.offsetWidth`这行代码不能少。虽然这行代码没有实际的意义，但是少了之后，动画效果出不来：
当然，我们也可以把这行代码换成`el.offsetHeight`、`el.offsetLeft`、`el.offsetTop`之类的，只要包含了offset就行。
**注意2**：
`enter()`函数里，函数的第二个参数要加上`done`，函数体的最后一行要写`done()`，表示**立即执行**后面的`afterEnter()`函数；如果没有这个`done`，则会**延迟执行**后面的`afterEnter()`函数：
Vue官方文档的解释是这样：
> 当只用 JavaScript 过渡的时候，在`enter`和`leave`中必须使用`done`进行回调。否则，它们将被同步调用，过渡会立即完成。
## 使用transition-group元素实现列表动画
现在的场景是：在一个``列表中，如果我想给**指定的某个**`li`添加动画效果，该怎么做呢？（需要声明的是，这些`li`是用v-for循环进行遍历的）
如果我们用``把`li`包裹起来，就会让所有的`li`都具备了动画，这显然是不可取的。
那该怎么做呢？这里我们就可以用`transition-group`进行包裹。
**代码举例1**：点击添加按钮后，给新增的 item 加个动画
```html
Document
```
运行效果如下：
**改进1**：添加删除item的功能
基于上面的代码，我们来添加**删除item**的功能，代码本应该是这样写：
```html
Document
```
运行效果如下：
**改进2:**：
上图中，我们发现，当我删除第2个item时，**第3、第4个item在往上移动的过程比会较突兀**。为了改进这个地方，我们可以给`.v-move`、`.v-leave-active`加一些动画属性。最终，完整版代码如下：
```html
Document
```
运行效果如下：
### transition-group中appear和tag属性的作用
我们可以在上面的代码基础之上，给transition-group加上`appear`属性，这样的话，可以让transition-group包裹的所有DOM元素在刷新时，有**淡入效果**。
```html
Document
```
**改进**：`transition-group`的`tag`属性
上面的代码中，我们审查一下代码元素会发现，用`transition-group`包裹的元素，会被默认套上一层``：
这个``虽然没有太大副作用，但是不符合代码规范。为了解决这个问题，我们可以通过`tag`属性给`transition-group`包谷的元素套上一层``，然后把现有的``注释掉，就可以了。最终代码如下：
```html
Document
```
这样的话，审查元素的效果如下：
