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就会在适当的时机自动添加或移除这些类名。

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello</p>
    </transition>
  </div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

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

11.3.4 CSS动画

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

<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)

<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能够追踪每个节点的身份，从而重用和重新排序现有元素。

<transition-group name="list" tag="div">
  <div v-for="item in items" :key="item.id" class="list-item">
    {{ item.text }}
  </div>
</transition-group>
<style>
.list-enter-active, .list-leave-active {
  transition: opacity 1s, transform 1s;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

在上面的例子中，当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项目中灵活运用过渡动画，为用户带来更加流畅和吸引人的交互体验。