SPA路由切换动画失效主因是DOM节点被框架销毁重建，导致浏览器无法触发动画；须用v-show或display:none保留节点，显式设置transition的name与mode，并定义全部6个CSS类，优先过渡transform和opacity。
SPA路由切换动画失效，不是CSS没写对，而是DOM节点被框架销毁重建了——浏览器根本没机会触发动画。
Vue Router的leave动画？检查name和mode
很多人只加name属性，导致生成的CSS类名是v-enter，而你写的.slide-enter压根不匹配。
- 必须显式声明
name="slide"，否则所有类名都按v-前缀生成 - 加
mode="out-in"，否则新旧组件会同时渲染，leave阶段被覆盖或跳过 - CSS里要定义全部6个类：
.slide-enter-active、.slide-enter-from、.slide-enter-to、.slide-leave-active、.slide-leave-from、.slide-leave-to；漏一个，链就断了
React中useLocation().key变化但动画没重置？别在useEffect(() => {}, [])里初始化transform
首次挂载时设了transform: translateX(100%)，但路由切换后这个值还卡着，新页面直接从偏移位置开始动画，看起来像没动。
- 进出场状态必须随
location.key重置，不能只靠组件挂载 - 用
useLayoutEffect配合location.key依赖，每次切换前强制清空目标元素的transform内联样式 - 避免在
@keyframes里写left: 100%——父容器宽度一变，位移就错；改用transform: translateX(100%)，不触发重排，且值稳定
CSS transition写了却“一闪而过”？DOM被卸载是主因
Vue的v-if、React的条件渲染，会让旧组件彻底卸载，节点消失，transition连起点都抓不到。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 把
v-if换成v-show，或React里用display: none+opacity组合控制显隐，保留DOM节点 - 确保参与动画的元素在路由切换前后都存在，且继承链上没有意外的
position: static打断定位上下文 - 动画开始前手动触发重排：比如在
beforeEnter钩子中读一次el.offsetHeight，逼浏览器计算当前样式，否则首帧可能被跳过
为什么transition: all 0.3s反而让动画卡顿？
all会过渡所有可动画属性，包括你没意识到的color、height、border——它们触发重排，拖垮帧率。
- 只过渡明确需要的属性：
transition: opacity 0.3s, transform 0.3s -
transform和opacity走GPU加速，其他如left、top、width会强制CPU渲染 - 如果必须动高度，别用
height过渡（auto值不支持），改用max-height或JS测高后设固定值
最常被忽略的一点：动画效果是否生效，80%取决于DOM是否连续存在，而不是CSS写得多漂亮。先保节点，再调样式，顺序错了，后面全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
