ios safari 中 transition 失效主因是作用于不支持硬件加速的属性（如 height、margin），应改用 transform/opacity 并加 translateZ(0) 或 will-change，删 -webkit- 前缀，避免 layout 触发重排。
transition 在 iOS Safari 里完全没反应
多数情况是 transition 作用在了不支持硬件加速的属性上，比如 height、margin、background-position。iOS WebKit 对这些属性的过渡做了限制，即使写了 transition: height 0.3s，也大概率静默失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
transform+opacity替代：比如展开菜单改用transform: scaleY(1)而非height: auto - 强制开启 GPU 加速：给过渡元素加
transform: translateZ(0)或will-change: transform（注意will-change别滥用，仅在真正需要时设置） - 确认触发时机：移动端没有 :hover，别依赖 hover 触发 transition；改用 class 切换或 javaScript
element.classlist.toggle()
加了 -webkit-transition 还是不动
加前缀只是历史兼容手段，现代 iOS（13+）已原生支持无前缀 transition。盲目加 -webkit-transition 不但无效，还可能因浏览器解析优先级混乱导致行为异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
-webkit-transition，只保留标准写法transition: transform 0.25s ease - 检查是否被其他 css 覆盖：用 Safari 开发者工具（连接 mac 的「开发」菜单）看 computed 样式里
transition是否被标为 strike-through - 确认 transition-Property 没写错别字，比如把
tranform写成transform少个n，这种低级错误在真机上不会报错，只会静默失效
transition-delay 在点击后延迟不生效
移动端点击存在约 300ms 的延迟（尤其未启用 viewport 优化时），容易让人误以为 transition-delay 没起作用。更常见的是：js 点击事件中直接修改 class，但样式计算尚未完成，导致 transition 被跳过。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 class 切换后加
void element.offsetWidth（强制重排），确保浏览器先读取当前样式再应用新样式 - 用
setTimeout包一层 class 操作（哪怕设为 0），把任务推到下一帧：setTimeout(() => { el.classList.add('active'); }, 0); - 避免在
touchstart阶段就改样式，改用touchend或click（并确保存在且user-scalable=no未禁用缩放）
动画卡顿或闪一下才开始
本质是浏览器没能及时进入合成层（compositor layer）。transition 若涉及 layout（如 width/height/line-height），每次帧都会触发重排，移动端性能吃不消，表现为卡顿、掉帧甚至跳过首帧。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对
transform和opacity做 transition —— 它们可由 GPU 独立处理，不触发重排 - 避免在 transition 中混用
left/top和transform：前者触发布局，后者走合成，混合使用会让浏览器反复降级回软件渲染 - 检查是否有
overflow: hidden父容器裁剪了 transform 动画区域（尤其 scale 或 translate 超出父容器时）
移动端 transition 的坑不在写法，而在渲染管线的理解。一个看似简单的 transition: all 0.3s，在 iOS 上可能绕过合成器直奔主线程重排——这时候加前缀没用，调时长也没用，得从属性选择和触发时机重新设计。