Vue嵌套transition无法按预期生效：内层嵌套过渡完全失效

核心根因：同类型切换节点缺失唯一key，触发Vue就地复用逻辑 #

• Vue Transition组件在包裹同类型元素执行v-if/v-else切换时，强制要求每个切换节点绑定唯一key值。
• 底层逻辑：Vue的虚拟DOM diff算法如果识别到两个同类型节点，会默认执行“就地复用”逻辑——仅修改节点内容，不会触发节点的创建、销毁全流程，自然也不会激活Transition组件监听的进入/离开钩子。这种情况下哪怕过渡样式配置完全正确，动画流程也不会触发。
• 对应你的场景：外层Transition包裹的是两个结构完全不同的业务组件（WithdrawalForm/WithdrawalConfirm），diff阶段能直接识别到节点类型变化，所以能正常触发过渡，不需要额外加key。而内层你用两个同类型的v-card做切换，没加key就会直接触发复用逻辑，跳过整个过渡流程。
• 修正代码：给两个v-card绑定唯一的key属性：

<transition name="fade" appear>
  <v-card v-if="show" key="card1">Card1</v-card>
  <v-card v-else key="card2">Card2</v-card>
</transition>

次要根因：Scoped样式的匹配边界限制 #

• 就算补全了key，部分场景下因为scoped样式的编译规则，定义的过渡类也可能匹配不到目标节点：scoped样式编译后会给所有选择器追加[data-v-组件哈希]的属性选择器，针对Vuetify这类第三方组件的根元素，很容易遇到组件自带样式的优先级覆盖，导致过渡类的样式失效。
• 修正代码：如果加key后动画依然无响应，把scoped中的过渡类用深度选择器穿透即可：

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

优化建议 #

• 可以给内层Transition补上和外层一致的mode="out-in"配置，避免新旧卡片同时存在导致的布局错位：

<transition name="fade" mode="out-in" appear>

内容的提问来源于stack exchange，提问作者Kogelet