页面切换动画不触发需手动控制：用fetch加载html后替换内容，添加动画类前执行void element.offsetwidth强制重排；css中避免display:none，显式声明transform/opacity初始值；用transitionend事件精准移除类名；ios需加will-change和backface-visibility。
页面切换时动画不触发，检查 history.pushState 是否绕过了刷新
HTML5 单页应用（SPA）中用 history.pushState 切换页面时，浏览器不会自动重载 DOM，所以 CSS 动画类名加了也无效——因为元素没“重新进入”。必须手动控制动画的触发时机。
- 不要依赖
window.location.href = 'page2.html'，它会整页刷新，过渡断掉 - 推荐用
fetch()加载新页面 HTML 片段，再替换document.body.innerHTML或某个容器内容 - 替换完成后，先移除旧动画类，再添加新动画类，并用
void element.offsetWidth强制重排，确保浏览器识别“状态重置”
CSS 过渡写法要避开 display: none 和隐式初始值
display: none 会让元素完全脱离渲染流，transition 对它无效；而直接写 opacity: 0 → 1 也可能因初始值未显式声明导致动画跳帧。
- 用
visibility: hidden+opacity: 0替代display: none - 所有参与动画的属性（如
transform,opacity）必须在初始状态显式写出，不能靠继承或浏览器默认值 - 推荐组合：淡入+上滑，用
transform: translateY(20px)起始，配合transition: opacity 0.3s, transform 0.4s
.page-enter {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s, transform 0.4s;
}
.page-enter-active {
opacity: 1;
transform: translateY(0);
}
.page-exit {
opacity: 1;
transform: translateY(0);
transition: opacity 0.3s, transform 0.4s;
}
.page-exit-active {
opacity: 0;
transform: translateY(-20px);
}
JavaScript 控制动画节奏的关键是监听 transitionend 而非定时器
用 setTimeout 等固定毫秒数去移除类名，极易和实际动画时长不一致（比如用户开了系统动画缩放、CSS 被覆盖、GPU 加速未生效），造成闪动或卡顿。
- 对入场元素绑定一次
transitionend，并在回调里移除page-enter-active - 注意事件可能被子元素冒泡触发，用
e.target === element做校验 - 退出动画结束后才允许下一次导航，避免多个动画叠加冲突
function animateIn(element) {
element.classList.add('page-enter', 'page-enter-active');
element.addEventListener('transitionend', function handler(e) {
if (e.target === element && e.propertyName.includes('opacity')) {
element.classList.remove('page-enter', 'page-enter-active');
element.removeEventListener('transitionend', handler);
}
});
}
移动端 Safari 的 will-change 和 backface-visibility 必须加
iOS Safari 对 CSS 动画优化保守，尤其涉及 transform 时容易掉帧甚至白屏。不加硬件加速提示，translateY 滑动可能卡在 30fps。
立即学习“前端免费学习笔记（深入）”；
- 给动画容器加上
will-change: transform, opacity - 同时设置
backface-visibility: hidden防止 iOS 渲染层异常 - 注意
will-change不要滥用——只加在真正要动的元素上，且动画结束后可移除（否则持续占 GPU 内存）
backface-visibility: hidden 导致的偶发白屏**。 
