Vue 里面 transition 标签是干什么用的 请详细一些 并给出案例

Vue 中的 <transition> 标签是用来在应用中添加过渡效果的。它可以在元素插入或删除时自动添加动画效果，以使页面更加生动、平滑。

具体来说，<transition> 标签可以包裹任何元素，然后根据元素的插入或删除状态自动应用过渡效果。我们可以通过设置不同的属性来定制过渡效果，例如：

• name: 过渡效果的名称，可以用来设置 CSS 类名。
• enter-class 和 leave-class: 进入和离开过渡状态时应用的 CSS 类名。
• enter-active-class 和 leave-active-class: 进入和离开过渡状态时应用的活动 CSS 类名。这些类名可以用来设置具体的过渡动画效果。
• appear: 是否在初始渲染时应用过渡效果。
• mode: 过渡模式，可以是 in-out（新元素先进入，旧元素后离开）或 out-in（旧元素先离开，新元素后进入）。

以下是一个简单的例子，演示如何使用 <transition> 标签创建一个简单的淡入淡出效果：

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">This is some text.</p>
    </transition>
  </div>
</template>

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

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

在这个例子中，我们使用了一个 show 变量来控制元素的出现和消失。当点击 Toggle 按钮时，show 变量会切换为 true 或 false，从而触发元素的插入或删除。我们使用了一个 fade 的名称来设置过渡效果的类名，并在样式中定义了具体的过渡动画效果。

当元素插入时，Vue 会自动添加 fade-enter 类名，并在下一帧中添加 fade-enter-active 类名，从而触发过渡动画效果。当元素删除时，Vue 会自动添加 fade-leave 类名，并在下一帧中添加 fade-leave-active 类名，从而触发离开动画效果。

总之，<transition> 标签是一个非常有用的 Vue 组件，可以帮助我们快速添加生动、平滑的过渡效果，提高用户体验。