页面切换动画不触发是因为transition只响应属性值变化过程，而非类名添加；若初始状态与目标状态相同（如opacity均为1）或元素处于display:none脱离渲染流，则无法触发动画。
页面切换动画不触发，不是 CSS 写错了，而是 DOM 状态没“重置”——transition 只响应属性值的**变化过程**，不是类名一加就自动动。
为什么加了 fade-in 类却没动画
常见错误是直接 element.classList.add('fade-in') 后就以为完事。但若元素原本 opacity: 1，而 .fade-in 也设 opacity: 1，浏览器根本没检测到变化；或者元素初始是 display: none，它已脱离渲染流，opacity 过渡完全失效。
- 必须显式声明初始状态：
.page { opacity: 0; transform: translateY(20px); } - 避免
display: none—— 改用visibility: hidden; position: absolute;或opacity: 0配合pointer-events: none - 加类前强制重排：
element.offsetHeight;（或void element.offsetWidth），让浏览器“看到”旧值，再设新值才能触发动画
transitionend 事件监听总不触发
不是事件没绑上，而是监听对象错了：子元素的 transitionend 会冒泡到父级，导致回调提前执行；或者同时过渡多个属性（如 opacity 和 transform），但只监听了其中一个，另一个还没结束就移除了类。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 始终校验事件目标：
if (e.target === element && e.propertyName === 'opacity') - 多个过渡属性时，用
e.propertyName.includes('opacity')或e.propertyName.includes('transform')宽松匹配 - 不要用
setTimeout模拟动画时长——系统缩放、GPU 加速开关、CSS 覆盖都会让实际耗时偏离预设值
iOS Safari 上动画卡顿或闪白
这不是性能差，是 Safari 对透明度动画的合成策略更保守。纯 opacity 切换在某些机型上会触发软件渲染，帧率骤降，甚至残留白色残影。
- 优先用
transform: translateX()替代位移类动画，它天然触发 GPU 加速 - 对动画容器加
will-change: transform;，提前告知浏览器该元素将变化 - 加上
backface-visibility: hidden;防止 3D 变换时出现翻转面闪烁 - 避免混用
opacity和transform做同一入场动画——节奏难对齐，iOS 尤其容易错层
history.pushState 后动画不执行
因为 pushState 不刷新页面，DOM 没重建，浏览器认为“元素一直在这”，加类等于没变。你得手动模拟一次“进入”过程。
- fetch 新内容后，先插入 DOM，但保持
opacity: 0和初始transform - 立即读取一个布局属性（如
el.scrollHeight）触发重排 - 再加入场类，比如
el.classList.add('page-enter-active') - 服务端必须配置 fallback：所有前端路由都返回
index.html，否则刷新就是 404
最易被忽略的是：动画是否真正“完成”——transitionend 可能因元素被快速移除、父容器 display: none 或 CSS 层叠覆盖而根本不会触发。上线前务必在真机上测试导航连点、快速返回、横竖屏切换这些边界场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
