Vue animation notes

Answer 1

在Vue中实现动画主要有以下几种方式：

**一、基于Vue过渡类名实现动画**
1. **过渡类名及含义**
- 进入过程：
- `v - enter`：进入的起始时刻（例如`Opacity:0`），表示进入之前元素的状态，此时还没有进入。
- `v - enter - active`：进入的过程（时间段），即入场动画时间段。
- `v - enter - to`：进入后的时刻（例如`Opacity:1`）。
- 离开过程：
- `v - leave`：离开的起始时刻（例如`Opacity:1`）。
- `v - leave - active`：离开的过程（时间段），即出场动画时间段。
- `v - leave - to`：离开后的时刻（例如`Opacity:0`），动画离开之后，到达离开的终止状态，此时元素的动画已经结束。
2. **实现步骤**
- 使用`transition`元素，把需要被动画控制的元素包裹起来。
- 自定义两组样式，控制`transition`内部元素实现动画。例如：
```css
.v - enter,.v - leave - to{
opacity: 0;
transform:translateX(90px);
}
.v - enter - active,.v - leave - active{
transition: all 1s ease;
}
```

**二、自定义类名实现动画**
1. 修改`transition`标签的`name`属性为自定义名称，同时修改属性类中的`v`为刚刚的自定义名称。例如将`v - enter`修改为`my - enter`。假设定义了`my`这个自定义名称，样式可以这样写：
```css
.my - enter,.my - leave - to{
opacity: 0;
transform:translateY(90px);
}
.my - enter - active,.my - leave - active{
transition: all 1s ease;
}
```

**三、使用第三方类库animate.css实现动画**
1. 入场使用`bounceIn`，离场使用`bounceOut`。
2. 标签`transition`绑定动画需要加`animated`。有两种写法：
- 一种是在`transition`标签中添加`enter - active - class`和`leave - active - class`属性：
```html