transition动画不触发是因为元素未重置状态，需强制读取布局属性（如offsetheight）制造重排，并显式声明初始样式、避免display:none、嵌入居中逻辑、适配ios及view transitions api配对规则。
transition动画不触发，是因为元素没“重置”状态
单页应用中用 history.pushState 切换后直接加 fade-in 类，动画大概率不跑——浏览器认为 DOM 没变，起始值和结束值被合并渲染了。关键不是 CSS 写得不对，而是你没给浏览器一个“重排机会”。
- 必须在添加动画类前，强制读取一次布局属性，比如
el.offsetHeight或void el.offsetWidth - 初始状态不能靠继承或默认值，
opacity、transform必须显式声明（例如opacity: 0; transform: translateY(20px) scale(0.95);） - 避免用
display: none控制显隐，它会让元素彻底脱离渲染流，transition 失效；改用visibility: hidden; opacity: 0;
居中过渡需要同时控制位置 + 动画时机
只写 margin: auto 或 flex 居中不够——这些是静态布局，和 transition 无关。要让“载入时居中动画”，得把居中逻辑嵌进过渡流程里。
- 容器设为
display: flex; justify-content: center; align-items: center;，确保新内容插入后天然居中 - 载入元素自身加初始
transform: scale(0.85) translateY(10px);，再配合transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); - 动画类激活时设
transform: scale(1) translateY(0);，这样缩放+位移一起动，视觉更稳 - iOS 上容易卡顿，加
will-change: transform;和backface-visibility: hidden;提升合成层优先级
View Transitions API 配对失败的典型表现
用了 document.startViewTransition() 却只看到新内容淡入、旧内容没退出动画？大概率是 view-transition-name 没对上，或旧元素提前不可见。
- 新旧元素都必须带相同字符串的
style="view-transition-name: hero"（大小写敏感、无空格、不能用变量拼） - 旧元素在 transition 开始前不能是
opacity: 0或visibility: hidden，否则快照捕获失败 - 检查 DevTools → Layers 面板：若没看到
::view-transition-old(hero)图层，说明配对失败 - 框架里（如 Vue/React）务必等 DOM 更新完成（
nextTick/flushSync）再调startViewTransition
transitionend 监听容易误判子元素冒泡
动画结束想移除类或触发回调，但 transitionend 事件常被子元素触发，导致逻辑错乱。
- 监听时必须校验
e.target === element和e.propertyName === 'transform'（或你关心的具体属性） - 不要用
element.addEventListener('transitionend', handler)简单绑定，加守卫条件 - 多个属性过渡（如
transform+opacity）会触发多次事件，按需节流或用setTimeout合并 - 动画中途被中断（如快速连点）会导致事件不触发，建议加超时兜底：
setTimeout(() => { cleanup(); }, 500)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
