transition触发失败的三个常见原因是：初始与目标状态一致、元素处于display:none、JS一次性操作导致浏览器优化跳过中间帧；解决方法是显式声明初始态、用visibility:hidden替代display:none、强制重排。
transition 触发失败的三个常见原因
加了 transition 却没动画，大概率不是写法错，而是 DOM 状态没“动起来”。浏览器只对属性值的**变化过程**响应过渡，不是对类名添加本身。以下三种情况最常导致失效：
- 元素初始状态和目标状态完全一致（比如都设了
opacity: 1），浏览器检测不到变化 - 元素处于
display: none—— 它已脱离渲染流，opacity或transform根本不参与计算 - JS 一次性加类后立刻修改样式，浏览器把两次操作合并优化，跳过了中间帧
解决方法统一：显式声明初始态（如 .fade-enter { opacity: 0; transform: translateY(10px); }），用 visibility: hidden 替代 display: none，加类前执行 void element.offsetWidth 强制重排。
用 transform + transition 实现高性能入场动画
想让组件从右滑入、淡入或缩放出现？必须用 transform，别碰 left、margin 或 width —— 这些会触发重排，低端机上掉帧明显。iOS Safari 尤其敏感，纯 opacity 切换还可能闪白。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 入场容器加
will-change: transform, opacity，动画结束后立即移除 - 配合
backface-visibility: hidden防止 3D 变换时翻转面闪烁 - 过渡只写在容器上：
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s - 避免同时用
opacity和transform控制同一入场节奏，iOS 容易错层
示例：一个弹层入场
.modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.8);
opacity: 0;
transition: transform 0.35s, opacity 0.35s;
}
.modal.active {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}transitionend 事件监听总不触发？校验目标和属性
绑了 transitionend 却收不到回调，不是事件没挂上，而是监听逻辑松散。子元素的过渡事件会冒泡到父级，多个属性同时过渡时只监听一个容易漏掉。
安全写法：
- 始终校验
e.target === element，防止子元素冒泡干扰 - 用
e.propertyName === 'transform'或e.propertyName.includes('opacity')显式匹配 - 不要用
setTimeout模拟动画时长——系统缩放、GPU 开关、CSS 覆盖都会让实际耗时偏离 - 动画结束立即移除监听器，避免重复触发
错误示范：element.addEventListener('transitionend', handler)；正确写法：element.addEventListener('transitionend', e => { if (e.target === element && e.propertyName === 'transform') { /* 处理 */ } })
history.pushState 后动画不执行？手动重置状态
pushState 不刷新页面，DOM 没重建，浏览器认为“元素一直在这”，加类等于没变。你得手动模拟一次“进入”过程。
关键步骤：
- fetch 新内容后插入 DOM，但保持初始态：
el.style.opacity = 0; el.style.transform = 'translateY(20px)'; - 立即读取布局属性触发重排：
el.scrollHeight或el.offsetHeight - 再加入场类，浏览器才能检测到从 0 → 1 的变化
- 移动端需额外加
el.style.willChange = 'transform, opacity'，动画完立刻清空
复杂点在于：不同组件入场节奏要对齐（比如背景淡入 + 内容滑入），不能靠 CSS 独立控制，得用 JS 统一调度。容易被忽略的是，动画结束后的 cleanup —— 移除临时样式、重置 will-change、释放监听器，否则内存泄漏或后续动画错乱。
