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

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

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

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

<template>
  <button @click="show = !show">Togglebutton>
  <Transition>
  
  <div>
    <p v-if="show">hellop>
  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>