vue 3 中 v-leave 类名不触发动画，因其已被重命名为 v-leave-from 作为离场起始状态，若仍沿用 v-leave 或遗漏 -from 后缀，则浏览器无法获取离开起点样式，导致直接卸载 dom 而无过渡。
为什么v-leave类名不触发动画
Vue 3 的 <transition></transition> 在离场时依赖 v-leave-from（而非旧版的 v-leave）作为起始状态，但很多人仍按 Vue 2 习惯写 v-leave 或漏掉 -from 后缀，导致浏览器根本没拿到「离开起点」，直接删 DOM。
关键点在于：Vue 3 默认使用 v-leave-from / v-leave-to / v-leave-active 这套命名，且 v-leave-from 必须显式声明初始样式（比如 opacity: 1），否则过渡无起点可插值。
-
v-leave-from和v-enter-from都是“变化前”的状态，必须有明确的、非继承的 CSS 值 - 若组件内用了
v-if控制显示，确保它被包裹在<transition></transition>直接子节点中，不能是v-show - 检查 DevTools 的 Elements 面板 → Computed → 确认
v-leave-from对应元素的opacity（或其它过渡属性）是否真为起始值（如1），而不是initial或空
<router-view></router-view> 离场动画失效的根源
单纯把 <transition></transition> 包在 <router-view></router-view> 外层，但没用 <keep-alive></keep-alive>，会导致离开的组件在路由切换瞬间被卸载，v-leave-active 还没执行完就被销毁 —— 动画帧被中断。
Vue Router 的 <router-view></router-view> 默认不缓存组件实例，v-leave 类刚加上，DOM 就没了。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 必须配合
<keep-alive></keep-alive>使用：<transition name="fade"><keep-alive><router-view></router-view></keep-alive></transition> - 如果用了
v-slot写法（如<router-view v-slot="{ Component }"></router-view>），<transition></transition>必须包在<component :is="Component"></component>外层，且Component渲染的必须是单根节点 - 避免在
<router-view></router-view>上直接加v-if，这会干扰<transition></transition>对生命周期的判断
scoped 样式下 v-leave-active 类不生效
<style scoped></style> 会让 Vue 给选择器自动加 data-v-xxxx 属性，但 <transition></transition> 运行时动态添加的 v-leave-active 类没有这个哈希，CSS 规则完全不匹配。
这不是 bug，是 scoped 的设计机制 —— 它只作用于静态编译时的类名，而 transition 类是运行时注入的。
- 必须用深度选择器穿透：
::v-deep .v-leave-active { transition: opacity 0.3s ease; } - 不要用
/deep/（已在部分构建工具中废弃），优先用::v-deep，并确认你的vue-loader版本 ≥ 15.9 - 如果用了 PostCSS 插件（如
postcss-preset-env），确保没禁用::v-deep解析
组件返回 Fragment 导致离场失败
Vue 3 允许组件模板多根节点（Fragment），但 <transition></transition> 要求其**直接子节点必须是单个 DOM 元素**。如果页面组件默认导出的是 <div>...</div>
<div>...</div>（无外层包装），<transition></transition> 就无法挂载动画钩子，控制台报错 "non-element root node"，离场自然失效。
- 每个路由组件的
<template></template>必须只返回一个根元素，哪怕只是<div><!-- 内容 --></div> - 注释、文本节点、空格也算“节点”，
<template><!-- 注释 --><div>A</div></template>是双节点，会失败 - 用 DevTools 检查实际渲染的 DOM 结构，确认
<transition></transition>下一级是否真只有一个<div> 或其他原生标签<p>离场动画最容易被忽略的，是 <code>v-leave-from的初始值必须和进入时的v-enter-to值一致，且不能依赖父级继承或计算值 —— 浏览器只认你写死在 CSS 里的那个数字。
