transition不生效因class切换在同一渲染帧，浏览器跳过中间状态；应延迟添加class至下一帧，或强制重排；transitionend不触发伪元素和继承属性，需监听具体属性并兼容Safari。
transition 不生效？检查 class 切换是否在同一个渲染帧
CSS transition 依赖浏览器的样式计算与重绘流程，如果 JS 里先删 class 再加 class 在同一轮同步执行中完成，浏览器会跳过中间状态，动画直接“跳变”。这不是 bug，是渲染机制决定的。
常见错误现象：element.classList.remove('active'); element.classList.add('active'); 看不到过渡效果。
- 正确做法：用
setTimeout或requestAnimationFrame把添加类名延迟到下一帧 - 更稳妥的写法是先强制触发重排（比如读取
offsetHeight），再改 class —— 但不推荐，有性能隐患 - 现代方案：用
element.classList.toggle('active', false)+void element.offsetWidth+element.classList.toggle('active', true)
transitionend 事件监听不到？注意伪元素和继承属性
transitionend 只在**被过渡的 CSS 属性真正发生变化时**触发，且只作用于目标元素本身，不冒泡，也不适用于伪元素（::before/::after）或通过 inherit 得来的值。
使用场景：需要在动画结束时清理定时器、释放资源、或切换下一个状态。
立即学习“Java免费学习笔记（深入）”；
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
- 确保监听的是实际变化的属性，比如过渡
opacity就监听opacity，不要监听all（兼容性差，且可能误触发） - 多个属性同时过渡时，
transitionend会按属性分别触发，不是一次触发 - Chrome/Firefox 对
transform的transitionend支持稳定；Safari 曾长期不触发transform相关事件，需用webkitTransitionEnd兜底
JS 控制 transition 时，避免直接操作 style 属性覆盖 CSS 类过渡
一旦你用 element.style.transition = 'opacity 0.3s' 或 element.style.opacity = '0'，就可能破坏原本靠 class 控制的过渡逻辑。CSS 类里的 transition 会被内联样式覆盖（优先级更高），而内联 style 又不会随 class 移除自动消失。
参数差异：transition 是复合属性，设成 'all 0.2s' 容易误触不需要过渡的属性（比如 height 意外变化）；推荐显式写 'opacity 0.2s, transform 0.2s'。
- 最佳实践：所有过渡配置写在 CSS 类里（如
.fade-enter { opacity: 0; transition: opacity 0.2s; }），JS 只负责增删类名 - 如需动态控制持续时间，可用 CSS 自定义属性：
element.style.setProperty('--duration', '0.4s')，配合transition: opacity var(--duration) - 慎用
!important在 CSS 中强行覆盖 transition，它会让 JS 的 class 切换失效
移动端 touch 场景下 transition 卡顿？别忘了 will-change 和硬件加速
纯 transform 和 opacity 过渡在移动端通常走 GPU 合成层，但若涉及 left/top 或频繁重排的属性（如 width、height），就会掉回 CPU 渲染，出现卡顿甚至跳帧。
性能影响：iOS Safari 对非合成属性的过渡极其敏感，尤其在低配设备上。
- 用
transform: translateX(10px)代替left: 10px - 对即将过渡的元素提前加
will-change: transform（仅限必要元素，滥用会内存溢出） - 避免在
transition中混用布局属性（margin、padding）和绘制属性（color、background） - 用 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing” 和 “FPS meter”，直观验证是否触发重排/重绘
复杂点在于：过渡链路越长（比如 enter → idle → exit），越容易在某个环节漏掉 class 清理或事件解绑；容易被忽略的是 transition 时间未统一——CSS 里写了 0.3s，JS 里又用 setTimeout 等了 0.2s，结果错位。
