Vue 中 vue 中 transition 的理解？

在 Vue 中，<transition> 是一个用于在 Vue 组件中实现过渡效果的抽象组件。它可以让元素在插入、更新或移除时以一种渐进的方式改变。

1. 过渡的基本用法

使用 <transition> 组件包裹要进行过渡的元素，并提供 CSS 类名来定义过渡效果：

<template>
  <div>
    <transition name="fade">
      <p v-if="show">This will transition</p>
    </transition>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
};
</script>

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

在这个例子中，当 show 变量为 true 时，段落元素会以淡入淡出的方式显示和隐藏，触发过渡效果。

2. 过渡钩子

<transition> 组件提供了多个钩子函数，可以用来在不同阶段触发过渡效果，例如 before-enter、enter、after-enter、before-leave、leave、after-leave 等。

<transition
  name="fade"
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
>
  <!-- ... -->
</transition>

3. 过渡模式

<transition> 组件还支持不同的过渡模式，比如 in-out、out-in，这些模式可以决定同时触发多个元素的过渡时的行为。

<transition mode="out-in">
  <!-- ... -->
</transition>

过渡效果是在元素插入、更新或移除时触发的，通过结合 CSS 过渡效果和 Vue 提供的过渡钩子函数，可以创建各种各样的过渡动画效果，使得页面在变化时显得更加平滑和自然。