vue 中 transition 标签的用法

在 Vue 中，`<transition>` 标签用于为元素添加动画效果，它可以在元素插入或删除时应用过渡效果。下面是 `<transition>` 的基本用法：

<transition name="fade">
  <div v-if="show">这是一个会渐隐渐现的元素</div>
</transition>

在上面的代码中，`name` 属性指定了过渡效果的名称，这里是 `fade`。`<transition>` 标签内部的元素，这里是一个 `div`，通过 `v-if` 指令来控制其显示或隐藏。

然后，在 CSS 中定义过渡效果：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

上面的 CSS 中，`.fade-enter-active` 和 `.fade-leave-active` 分别表示插入和删除时过渡效果的状态。在这里，我们使用了 `transition` 属性来指定过渡效果，这里是 `opacity .5s`，表示透明度变化需要花费 0.5 秒。`.fade-enter` 和 `.fade-leave-to` 分别表示插入和删除时元素的状态，这里将透明度设置为 0，即隐藏元素。

这样，当 `show` 的值为 `true` 时，`<div>` 元素会以渐隐渐现的方式出现；反之，当 `show` 的值为 `false` 时，`<div>` 元素会以渐隐渐隐的方式消失。