vue 中的 transition 组件

Vue 中的 transition 组件可以用于在元素的插入、更新或删除时应用动画效果。transition 组件包括以下几个属性：

- name：指定过渡效果的名称，可以通过 CSS 中的 `.name-enter`、`.name-leave`、`.name-enter-active`、`.name-leave-active`、`.name-enter-to`、`.name-leave-to` 类名来设置不同阶段的动画样式。
- mode：指定过渡模式，可选值有 in-out（新元素先执行过渡，完成后旧元素执行过渡）、out-in（旧元素先执行过渡，完成后新元素执行过渡）和默认值（同时执行过渡）。
- appear：是否在初始渲染时应用过渡效果。
- css：是否使用 CSS 过渡效果。
- type：指定过渡类型，可选值有 transition 和 animation，默认为 transition。

在使用 transition 组件时，需要在要进行过渡的元素外层包裹一个 `<transition>` 标签，并在需要过渡的阶段添加 `v-enter`、`v-enter-active`、`v-enter-to`、`v-leave`、`v-leave-active`、`v-leave-to` 等 Vue 特定的类名。例如：

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

在这个例子中，当 `show` 的值发生变化时，`<p>` 元素会根据 `fade` 过渡效果进行渐隐渐现的动画。