Vue 3的舞台魔术师：揭秘<Transition>组件的过渡魔法

今天，我们来聊一聊vue3中的内置组件—— <Transition> 组件 <Transition> 是 Vue 3 中提供的过渡组件，用于在元素插入、更新或移除时添加动画效果。它可以帮助我们实现元素的淡入淡出、滑动、缩放等过渡效果，为用户界面增添动态和流畅的感觉。

<Transition> 的触发方式

• 由 v-if 所触发的切换
• 由 v-show 所触发的切换
• 由特殊元素 <component> 切换的动态组件
• 改变特殊的 key 属性

这里演示使用 v-if 指令

<template>
 <div>
    <button @click="showElement = !showElement">Toggle Element</button>
    <Transition name="fade">
      <div v-if="showElement">
        <h2>hello vue3</h2>
      </div>
    </Transition>
  </div>
</template>

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

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

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

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

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

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

该内置组件在使用时会为组件内的元素节点（注意：在该组件下只能有一个根元素节点，元素节点下可以嵌套）加载上6个类，分别为：.fade-enter-from、.fade-leave-to、.fade-enter-to、 .fade-leave-from、.fade-enter-active、.fade-leave-active（tips：fade为 <Transition> 组件的name属性）

这6个类可以理解为：有两种情况，该元素节点的渲染和销毁。而每种情况有三种状态，动画的初始状态，执行的动画状态，动画的结束状态。

===》组件内元素节点渲染前的状态——v-enter-from

===》组件内元素节点渲染时执行的动画——v-enter-active

===》组件内元素节点渲染后的状态——v-enter-to

===》组件内元素节点销毁前的状态——v-leave-from

===》组件内元素节点销毁时执行的动画——v-leave-active

===》组件内元素节点销毁后的状态——v-leave-to

<Transition> 组件的“生命周期”

<Transition> 组件的“生命周期”就是指在使用<Transition> 组件时触发的钩子函数 在 Vue 3 的 <Transition> 组件中，可以使用 JavaScript 钩子函数来控制过渡的各个阶段和动画效果。以下是 Vue 3 中 <Transition> 组件支持的 JavaScript 钩子函数：

> <Transition
> @before-enter="onBeforeEnter"
> @enter="onEnter" 
> @after-enter="onAfterEnter"
> @enter-cancelled="onEnterCancelled"
> @before-leave="onBeforeLeave"
> @leave="onLeave"
> @after-leave="onAfterLeave"
> @leave-cancelled="onLeaveCancelled"
> </Transition>

1. beforeEnter(el): 在元素插入之前立即触发，可以在此钩子函数中设置元素的初始状态，如设置 opacity、transform 等属性。
2. enter(el, done): 在元素插入之后立即触发，可以在此钩子函数中设置过渡动画效果，如淡入、滑动等。done 是一个回调函数，在动画完成时需要手动调用以通知过渡结束。
3. afterEnter(el): 在过渡动画完成后触发，可以在此钩子函数中进行清理工作或设置最终状态。
4. enterCancelled(el): 在动画过程中，如果 enter 被取消，则触发该钩子函数。
5. beforeLeave(el): 在元素离开之前立即触发，可以在此钩子函数中设置元素的初始状态，如设置 opacity、transform 等属性。
6. leave(el, done): 在元素离开之后立即触发，可以在此钩子函数中设置过渡动画效果，如淡出、滑动等。done 是一个回调函数，在动画完成时需要手动调用以通知过渡结束。
7. afterLeave(el): 在过渡动画完成后触发，可以在此钩子函数中进行清理工作或设置最终状态。
8. leaveCancelled(el): 在动画过程中，如果 leave 被取消，则触发该钩子函数。仅在 v-show 过渡中可用。

<Transition>组件的好处

1. 简化过渡效果的实现：Vue 3中的<Transition>组件提供了丰富的过渡效果选项和内置的过渡组件，使得实现过渡效果变得更加简单和直观。
2. 提供更好的用户体验：通过添加过渡效果，可以使页面的元素在进入和离开时平滑过渡，给用户带来更好的视觉体验，提升用户对页面的感知和满意度。
3. 提高页面的交互性：过渡效果可以增加页面元素的动态性和活力，使用户与页面的交互更加有趣和生动。

使用<Transition>组件时需要注意的问题

• 定义合适的过渡时长：过渡效果的时长应该适中，既不会过快让用户错过过渡效果，也不会过慢导致用户等待时间过长。
• 注意过渡元素的定位：过渡元素的定位方式需要正确设置，以确保过渡效果的顺利展示。
• 避免过渡冲突：如果页面中存在多个过渡元素，需要注意它们之间的过渡效果是否会相互冲突，可能需要进行适当的调整和配置。