Vue3中的<transition>组件在什么时候触发？

在 Vue3 中，<transition> 组件是用来在元素进入或离开 DOM 时应用过渡效果的组件。通过使用 <transition>，我们可以轻松地为元素添加动画效果，使得页面更加生动有趣。那么，<transition> 组件究竟在什么时候触发呢？本文将详细解答这个问题，并通过示例代码演示其使用。

1. 元素第一次渲染时

当一个元素第一次被渲染到 DOM 中时，如果该元素包裹在 <transition> 组件内，那么 <transition> 组件会立即触发进入动画效果。这通常在页面加载或组件初次挂载时发生。

示例

<template>
  <div>
    <transition name="fade">
      <p v-if="showElement">这是一个动画元素</p>
    </transition>
    <button @click="toggleElement">切换元素状态</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showElement = ref(true);

    const toggleElement = () => {
      showElement.value = !showElement.value;
    };

    return {
      showElement,
      toggleElement
    };
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在上述示例中，当 showElement 初始值为 true 时，<p> 元素第一次渲染到页面时，<transition> 组件会触发进入动画。

2. 元素在 DOM 中被更新时

当一个元素在 DOM 中更新时，如果该元素包裹在 <transition> 组件内，并且更新引发了元素的进入或离开，<transition> 组件会触发相应的过渡效果。这种情况常见于条件渲染或动态绑定的属性变化时。

示例

继续上面的示例，当我们点击按钮切换 showElement 的值时，<p> 元素会在 DOM 中被添加或移除，此时 <transition> 组件会分别触发进入和离开动画。

3. 元素在 DOM 中离开时

当一个元素从 DOM 中被移除时，如果该元素包裹在 <transition> 组件内，<transition> 组件会触发离开动画效果。这通常发生在元素被条件渲染（如 v-if）或列表渲染（如 v-for）时。

示例

在前述示例中，当点击按钮使 showElement 从 true 变为 false 时，<p> 元素会从 DOM 中移除，此时 <transition> 组件触发离开动画，逐渐隐藏该元素。

4. 补充：过渡类名的规则

在 <transition> 组件中，Vue 会自动为元素添加和移除以下 CSS 类来控制过渡效果：

• -enter：在元素进入时添加。
• -enter-active：控制进入过程中元素的状态。
• -enter-to：在元素完成进入时添加。
• -leave：在元素离开时添加。
• -leave-active：控制离开过程中元素的状态。
• -leave-to：在元素完成离开时添加。

例如，name="fade" 会生成以下 CSS 类：

• fade-enter
• fade-enter-active
• fade-enter-to
• fade-leave
• fade-leave-active
• fade-leave-to

这些类名用于定义过渡效果的不同阶段，帮助我们实现更复杂的动画。

总结

在 Vue3 中，<transition> 组件主要在以下三种情况下触发过渡效果：

1. 元素第一次渲染时。
2. 元素在 DOM 中被更新时。
3. 元素从 DOM 中移除时。

通过使用 <transition> 组件，我们可以轻松为页面中的元素添加进入和离开的动画效果，从而提升用户体验。在实际开发中，灵活运用 <transition> 组件，可以让页面更加生动有趣。