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>组件来为这段文本的显示和隐藏添加过渡效果。

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello, Vue.js!</p>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active 在 <2.1.8 版本中 */ {
  opacity: 0;
}
</style>

在这个例子中，<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实现的过渡效果特别有用。

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

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列表过渡和多组件过渡的基础。