13.1 单元素过渡-Vue.js从入门到精通(三)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(三)

### 13.1 单元素过渡

在Vue.js中，过渡和动画是提升用户体验的重要手段之一。通过Vue提供的过渡系统，你可以轻松地为元素进入、离开以及列表的增减添加过渡效果。本章将深入讲解Vue中的单元素过渡，帮助你理解如何为单个DOM元素添加过渡效果，以及如何利用Vue的`<transition>`和`<transition-group>`组件（虽然本节主要聚焦于`<transition>`）来实现这些效果。

#### 13.1.1 引入过渡

在Vue中，`<transition>`元素是一个抽象组件，它包裹着需要应用过渡效果的元素。`<transition>`本身不会被渲染为真实的DOM元素，但它会为包裹的元素提供进入（enter）、离开（leave）以及列表的过渡效果。对于单元素过渡，我们主要关注进入和离开两个状态。

#### 13.1.2 基本用法

假设我们有一个简单的按钮，点击后会显示或隐藏一个段落文本。我们可以使用`<transition>`组件来为这段文本的显示和隐藏添加过渡效果。

```html
<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello, Vue.js!</p>
    </transition>
  </div>
</template>

在这个例子中，`<transition name="fade">`定义了一个名为`fade`的过渡。Vue会自动为过渡的不同阶段生成类名，如`.fade-enter-active`、`.fade-leave-active`用于定义过渡期间的状态，`.fade-enter`和`.fade-leave-to`（或在Vue 2.1.8之前的版本中使用`.fade-leave-active`）用于定义过渡开始和结束时的状态。我们通过CSS为这些类名指定了`transition`属性和`opacity`属性，从而实现了淡入淡出的效果。

#### 13.1.3 过渡的钩子函数

除了使用CSS来定义过渡效果外，Vue还允许我们通过JavaScript的钩子函数来编程式地控制过渡。这对于那些需要更复杂的逻辑控制或者无法仅通过CSS实现的过渡效果特别有用。

```html
<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"

@before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
  name="my-transition"
>
  
</transition>
```

在`<script>`部分，你需要定义这些钩子函数，它们会在过渡的不同阶段被调用。例如：

```javascript
export default {
  methods: {
    beforeEnter(el) {
      // ...
    },
    enter(el, done) {
      // 使用done进行回调以表示过渡结束
      // 可以通过改变el的样式来实现过渡效果
      done();
    },
    // ... 其他钩子函数
  }
};
```

注意，`enter`和`leave`钩子需要显式地调用`done`回调来表示过渡的结束。如果不这样做，过渡可能会永远不会完成。

#### 13.1.4 过渡模式

Vue的`<transition>`组件还支持`mode`属性，用于控制过渡的模式。`mode`可以是`"out-in"`或`"in-out"`，默认是`"in-out"`。

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

这在你需要确保两个元素不会同时出现在页面上时非常有用，比如一个元素完全消失后，另一个元素才开始显示。

#### 13.1.5 过渡的CSS类名

Vue为`<transition>`组件的过渡过程提供了多个CSS类名，以便于开发者进行更精细的控制。这些类名基于你指定的`name`属性（如果未指定，则为`v`），并遵循以下模式：

- `.v-enter`：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
- `.v-enter-active`：定义进入过渡生效时的状态。在整个进入过渡阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类名可以被用来定义进入过渡的过程时间、延迟和曲线函数。
- `.v-enter-to`：定义进入过渡的结束状态。在过渡/动画完成之后生效（紧接着`v-enter-active`移除），在元素被插入之后下一帧生效（与此同时`v-enter`被移除），在过渡/动画完成之后移除。
- `.v-leave`、`.v-leave-active`、`.v-leave-to`：与`.v-enter`、`.v-enter-active`、`.v-enter-to`相对应，但用于离开过渡。

#### 13.1.6 结合第三方库

Vue的过渡系统并不限制于使用纯CSS。你完全可以将Vue的过渡系统与第三方动画库（如Animate.css、Velocity.js等）结合使用，以创建更加复杂和丰富的动画效果。这通常涉及到在JavaScript钩子函数中调用第三方库的API来实现动画效果。

#### 13.1.7 小结

单元素过渡是Vue中动画和过渡系统的基础。通过`<transition>`组件，你可以轻松地为单个元素添加进入、离开的过渡效果。通过CSS类名或JavaScript钩子函数，你可以实现各种复杂的动画效果。此外，Vue的过渡系统还支持与第三方动画库的结合使用，为开发者提供了极大的灵活性。掌握单元素过渡，是进一步学习Vue列表过渡和多组件过渡的基础。

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

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

Vue3技术解密

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

Vue源码完全解析

vue项目构建基础入门与实战

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

Vue原理与源码解析

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

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

移动端开发指南

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

VUE组件基础与实战