display:none 无法过渡因它是离散属性，浏览器不能插值；应改用 opacity+visibility+max-height 或 transform 实现动画，并注意 JS 触发时机、媒体查询写法及移动端兼容性。
transition 为什么对 display:none 无效
因为 display 是离散属性，浏览器无法插值计算 none 到 block 的中间状态。直接写 transition: display 0.3s 完全不会生效。
真正可行的过渡路径是：用 opacity + visibility 控制显隐，再配合 height 或 max-height 做高度变化（适用于折叠/展开）。
- 优先用
visibility: hidden替代display: none，它保留文档流且可过渡 - 若需彻底移出布局流，可在
transitionend事件后设display: none -
max-height是伪高度过渡的常用技巧，但需预估最大高度（如设max-height: 500px），否则从0到none仍无动画
CSS @media + transition 组合时的断点陷阱
响应式切换中，常见错误是媒体查询内直接改 display 或突然重置 transform，导致过渡中断或跳变。
关键原则：所有参与动画的属性，必须在「同一套 CSS 规则链」中声明初始值和目标值，不能靠媒体查询“覆盖式切换”。
立即学习“前端免费学习笔记（深入）”；
- 把
transition声明放在基础选择器里（如.nav），而不是只写在@media内部 - 避免在
@media (max-width: 768px)中把transform: translateX(0)改成none—— 应统一用transform: translateX(-100%)/translateX(0) - 移动端菜单展开时，建议用
transform: translateX()而非left，硬件加速更稳，且不触发回流
JavaScript 触发 transition 的时机问题
JS 修改 class 后立即读取 offsetHeight 或 getComputedStyle，常因浏览器未完成样式计算而拿不到新值，导致动画不触发。
本质是浏览器的渲染流水线：样式计算 → 布局 → 绘制。JS 同步修改后需强制触发重排，才能让 transition “看到”起始状态。
- 正确做法：先加 class 触发目标态，再用
offsetHeight或getComputedStyle(el).opacity强制重排，最后加第二轮 class（如is-open）启动动画 - 或者用
requestAnimationFrame分两帧操作：raf(() => { el.classList.add('is-open') }) - 慎用
setTimeout(..., 0)，它不可靠，尤其在高负载页面上可能错过渲染帧
移动端 touch 设备上的 transition 兼容细节
iOS Safari 和部分安卓 WebView 对 transition 的触发有额外限制：仅当属性变化由用户手势（click/touchend）直接引起时才启用动画；异步回调（如 Promise.then、fetch 回调）中修改样式会静默降级为即时切换。
- 确保关键交互（如点击菜单按钮）的 class 切换逻辑在
touchend或click事件处理器最顶层执行 - 避免在
fetch().then()里控制 UI 显隐 —— 可先占位，数据就绪后再补动画类 - 加
-webkit-transform: translateZ(0)或will-change: transform提前提示 GPU 加速，减少 iOS 上卡顿
真正难的不是写几行 transition，而是判断哪个属性能被插值、哪次重排被跳过、以及用户手指松开那一刻 JS 是否还在线。这些细节不报错，但会让动画看起来“卡一下”或者“直接闪现”。
