Transition内置组件设置无效的原因

1. 包裹的组件是否有显示隐藏状态的切换，或者是绑定的key值是否发生改变

• 由 v-if 所触发的切换
• 由 v-show 所触发的切换
• 由特殊元素·<component> 切换的动态组件
• 改变特殊的key属性

2. 要放在发生变化的组件外层，如果中间有其他元素或组件会不生效

<template>
  <button @click="show = !show">Toggle</button>
  <Transition>
  <!-- 这边多了一层，所以不会生效 -->
  <div>
    <p v-if="show">hello</p>
  </div>
  </Transition>
</template>
<script setup>
import { ref } from 'vue'

const show = ref(true)
</script> 
<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

3. 只有一个根元素

4. 是否设置过渡样式，

默认的类名是以v-开头，也可以自定义类名。

<Transition name="fade">
  ...
</Transition>