11.3 Vue过渡动画 -TypeScript和Vue从入门到精通(四)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(四)

### 11.3 Vue 过渡动画

在Vue.js的应用开发中，过渡动画不仅是提升用户体验的关键环节，也是展示应用美感和专业性的重要手段。Vue通过内置的`<transition>`和`<transition-group>`组件，提供了强大的过渡效果支持，使得开发者能够轻松地为元素或组件的进入、离开及列表的变动添加动画效果。本章节将深入探讨Vue中的过渡动画实现方式，包括基础用法、过渡类名、CSS过渡、CSS动画、JavaScript钩子以及列表过渡等高级特性。

#### 11.3.1 过渡的基础概念

在Vue中，`<transition>`和`<transition-group>`是专门用于包裹需要应用过渡效果的元素或组件的。`<transition>`用于单个元素或组件的过渡，而`<transition-group>`则用于多个元素的列表过渡，它支持元素的动态增减和排序。

- **`<transition>`**：为包裹的元素或组件在插入、更新或移除时应用过渡效果。
- **`<transition-group>`**：是`<transition>`的一个扩展，专门用于处理多个元素的列表过渡，它要求每个子节点都有一个唯一的`key`属性。

#### 11.3.2 过渡类名

Vue会在过渡开始时，自动应用一系列类名到过渡元素上，以便你可以通过CSS来控制过渡效果。这些类名包括：

- `v-enter-active`：定义进入过渡的状态。在元素被插入之后下一帧生效 (在`v-enter`之后)，在`transition/animation`完成之后移除。
- `v-leave-active`：定义离开过渡的状态。在离开过渡被触发时立刻生效，下一帧移除。
- `v-enter-from`：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
- `v-leave-to`：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (此时`v-leave-from`被移除)，在`transition/animation`完成之后移除。

此外，Vue 2.1.8+ 还引入了`v-enter`和`v-leave`这两个在版本变迁中逐渐被弃用的类名，但在一些旧项目中可能仍会见到它们的身影。

#### 11.3.3 CSS过渡

使用CSS过渡实现Vue中的动画效果是最直接的方式。你只需定义好相应的过渡类名及其样式，Vue就会在适当的时机自动添加或移除这些类名。

```html
<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello</p>
    </transition>
  </div>
</template>

在上面的例子中，当点击按钮时，`<p>`元素会以淡入淡出的效果显示或隐藏。

#### 11.3.4 CSS动画

与CSS过渡类似，你也可以使用CSS动画来实现更复杂的过渡效果。只需将`transition`属性替换为`@keyframes`定义的动画即可。

```html
<style>
@keyframes bounce-in {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
</style>
```

将`<transition>`的`name`属性改为`bounce`，即可应用上述动画效果。

#### 11.3.5 JavaScript钩子

除了使用CSS来定义过渡效果外，Vue还提供了JavaScript钩子，允许你在过渡的不同阶段执行JavaScript代码。这些钩子包括：

- `beforeEnter(el)`
- `enter(el, done)`
- `afterEnter(el)`
- `enterCancelled(el)`
- `beforeLeave(el)`
- `leave(el, done)`
- `afterLeave(el)`
- `leaveCancelled(el)`

```javascript
<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  
</transition>

methods: {
  beforeEnter(el) {
    // ...
  },
  enter(el, done) {
    // 使用setTimeout模拟动画延迟
    setTimeout(() => {
      // 设置样式或执行其他逻辑
      done(); // 调用done表示过渡结束
    }, 500);
  },
  leave(el, done) {
    // 类似enter的处理
  }
}
```

#### 11.3.6 列表过渡

`<transition-group>`是Vue为处理列表过渡提供的组件。它基于`<transition>`，但允许对多个元素进行过渡处理，并且要求每个子元素都有一个唯一的`key`属性，以便Vue能够追踪每个节点的身份，从而重用和重新排序现有元素。

```html
<transition-group name="list" tag="div">
  <div v-for="item in items" :key="item.id" class="list-item">
    {{ item.text }}
  </div>
</transition-group>

在上面的例子中，当`items`数组发生变化时，`<div>`元素会以平滑的动画效果进入或离开列表。

#### 11.3.7 过渡模式

Vue的`<transition>`和`<transition-group>`组件还支持`mode`属性，用于控制进入和离开元素之间的过渡顺序。`mode`可以设置为`"out-in"`或`"in-out"`：

- **`"out-in"`**：新元素先进行过渡，完成之后当前元素过渡离开。
- **`"in-out"`**：当前元素先过渡离开，离开完成后新元素过渡进入。

这对于控制过渡的先后顺序非常有用，尤其是在需要避免两个元素同时出现在屏幕上时。

#### 11.3.8 小结

Vue的过渡动画系统通过`<transition>`和`<transition-group>`组件，结合CSS过渡/动画以及JavaScript钩子，为开发者提供了强大而灵活的动画效果实现方式。无论是单个元素的简单过渡，还是列表的动态变化，Vue都能帮助你以优雅的方式展现元素的进出与变化，从而提升应用的用户体验和视觉美感。通过深入理解和掌握这些知识点，你将能够在Vue项目中灵活运用过渡动画，为用户带来更加流畅和吸引人的交互体验。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(一)

Vue源码完全解析

Vue原理与源码解析

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(二)

移动端开发指南

TypeScript和Vue从入门到精通(三)

VUE组件基础与实战

Vue.js从入门到精通(四)

Vue.js从入门到精通(三)

Vue3技术解密