Vue 中什么是过渡 (Transitions)？

推荐答案

在 Vue 中，过渡（Transitions）是一种用于在元素插入、更新或移除时应用动画效果的机制。Vue 提供了 <transition> 组件，允许你在元素进入或离开 DOM 时自动应用 CSS 过渡或动画。通过使用过渡，你可以为元素的显示和隐藏添加平滑的动画效果，从而提升用户体验。

本题详细解读

1. 过渡的基本概念

Vue 的过渡系统是基于 CSS 的过渡和动画实现的。当元素被插入、更新或移除时，Vue 会自动检测是否应用了过渡效果，并在适当的时机添加或移除 CSS 类。

2. <transition> 组件的使用

<transition> 组件是 Vue 提供的用于包裹需要过渡效果的元素或组件的容器。它可以应用于单个元素或组件，并且可以通过 name 属性来指定过渡的名称。

<transition name="fade">
  <p v-if="show">Hello, Vue!</p>
</transition>

3. 过渡的 CSS 类

Vue 在过渡过程中会自动添加和移除以下 CSS 类：

• v-enter: 元素进入过渡的开始状态。
• v-enter-active: 元素进入过渡的激活状态。
• v-enter-to: 元素进入过渡的结束状态。
• v-leave: 元素离开过渡的开始状态。
• v-leave-active: 元素离开过渡的激活状态。
• v-leave-to: 元素离开过渡的结束状态。

这些类名中的 v 是默认的前缀，可以通过 name 属性来自定义前缀。例如，如果 name="fade"，则类名会变为 fade-enter、fade-enter-active 等。

4. 过渡的 JavaScript 钩子

除了使用 CSS 类，Vue 还提供了 JavaScript 钩子函数，允许你在过渡的不同阶段执行自定义的 JavaScript 代码。常用的钩子函数包括：

• before-enter
• enter
• after-enter
• enter-cancelled
• before-leave
• leave
• after-leave
• leave-cancelled

// www.javascriptcn.com code example
<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
>
  <p v-if="show">Hello, Vue!</p>
</transition>

5. 过渡的模式

Vue 提供了两种过渡模式：in-out 和 out-in。默认情况下，进入和离开的过渡是同时进行的。通过设置 mode 属性，可以控制过渡的顺序。

• in-out: 新元素先进入，旧元素再离开。
• out-in: 旧元素先离开，新元素再进入。

<transition name="fade" mode="out-in">
  <p v-if="show">Hello, Vue!</p>
</transition>

6. 列表过渡

Vue 还提供了 <transition-group> 组件，用于对列表中的多个元素应用过渡效果。与 <transition> 不同，<transition-group> 会渲染为一个真实的 DOM 元素，并且每个子元素都需要唯一的 key 属性。

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

7. 过渡的应用场景

过渡效果常用于以下场景：

• 页面元素的显示和隐藏。
• 列表项的添加、删除和排序。
• 路由切换时的页面过渡。

通过合理使用过渡效果，可以显著提升应用的用户体验。