<transition标签使用的代码示例

下面是一个使用 `<transition>` 标签的代码示例：

<template>
  <div>
    <button @click="show = !show">{{ show ? '隐藏' : '显示' }}</button>
    <transition name="fade">
      <div v-if="show" class="box">
        <!-- 这里是要显示/隐藏的内容 -->
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>

<style>
.box {
  background-color: #ccc;
  height: 100px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scale(0.5);
}
</style>

在上述代码中，我们定义了一个名为 "fade" 的过渡效果，用于在内容显示/隐藏时添加过渡动画效果。具体来说，我们在 `<transition>` 标签中使用了 `name="fade"` 属性指定了过渡效果的名称，并使用 `v-if` 指令控制要显示/隐藏的内容。当 `show` 变量的值为 `true` 时，内容显示并应用过渡效果；当 `show` 变量的值为 `false` 时，内容隐藏并应用过渡效果。

我们还定义了一些 CSS 样式，用于实现 "fade" 过渡效果的动画效果。具体来说，我们在 `.fade-enter-active` 和 `.fade-leave-active` 样式中指定了 opacity 和 transform 属性的过渡效果，而在 `.fade-enter-from` 和 `.fade-leave-to` 样式中指定了 opacity 和 transform 属性的起始和结束状态。

总之，上述代码示例演示了如何使用 `<transition>` 标签实现内容显示/隐藏的过渡效果，并通过 CSS 样式实现了过渡效果的动画效果。