vue <transition>标签

`<transition>` 是 Vue.js 提供的一个组件，用于在元素在插入或删除时添加过渡效果。通过 `<transition>`，你可以在元素被添加或删除时，添加一个 CSS 过渡效果或者使用 JavaScript 监听过渡事件。

`<transition>` 组件有以下几个属性：

- `name`：指定过渡类名前缀，默认为 "v"。
- `appear`：是否在初始渲染时执行过渡，默认为 false。
- `appear-class`：指定初始渲染时过渡类名。
- `enter-class`：指定进入过渡时过渡类名。
- `enter-active-class`：指定进入过渡时动画类名。
- `enter-to-class`：指定进入过渡结束时过渡类名。
- `leave-class`：指定离开过渡时过渡类名。
- `leave-active-class`：指定离开过渡时动画类名。
- `leave-to-class`：指定离开过渡结束时过渡类名。

以下是一个简单的 `<transition>` 示例：

<transition name="fade">
  <div v-if="show">我会渐渐地显示出来</div>
</transition>

在上面的代码中，`<transition>` 组件的 `name` 属性设置为 "fade"，当 `show` 的值为 true 时，`<div>` 元素会渐渐地显示出来。当 `show` 的值为 false 时，`<div>` 元素会渐渐地消失。此时，Vue.js 会自动为元素添加过渡效果。你可以在 CSS 中定义 "fade" 类名对应的过渡样式。