加 cursor: pointer 能让 ios 点击触发 transition，是因为它向 webkit 发出可交互信号，绕过“非可点击元素触摸拦截”，确保 touchstart/click 事件正常分发。
为什么加 cursor: pointer 能让 iOS 点击触发 transition
这不是 CSS 动画本身的修复，而是绕过了 iOS Safari 的「非可点击元素触摸拦截」机制。iOS WebKit 默认只对明确标记为可交互的元素（如 <button></button>、<a></a>、带 cursor: pointer 或 onclick 的元素）分发 touchstart 和 click 事件。普通 <div> 即使绑了事件监听器，也可能根本收不到触摸信号——后续 class 切换、<code>offsetHeight 强制重排等操作全失效。
哪些元素必须加 cursor: pointer 才能可靠响应
以下场景中，不加该声明极易在真机上“点不动”：
- 用
<div class="menu-toggle"> 模拟汉堡按钮，而非原生 <code><button></button> - 卡片式列表项（
<article></article>或<li>）绑定点击展开详情 - 自定义 Tab 标签页，用
<span></span>实现切换 - CSS 动画菜单的触发区域是纯视觉容器（无语义标签、无内联事件）
- 元素没有设置
width和height（或内容撑开），导致 layout box 面积为 0 —— WebKit 认为“不可触达” - 父容器有
overflow: hidden且子元素部分被裁剪，实际触摸坐标落在裁剪区外 - 元素被
pointer-events: none显式禁用（包括继承自父级） - 使用了
transform: translateZ(0)或其他强制硬件加速属性，却未同时设置will-change: transform，某些 iOS 版本下会干扰 hit testing - 优先用语义化标签：
<button type="button"></button>自带可点击行为，无需额外样式 - 给非按钮元素显式添加
role="button"和tabindex="0"，确保可访问性与事件通路一致 - 监听
touchstart而非click，并在回调开头立即执行event.preventDefault()（尤其当内部含滚动容器时） - 配合
el.classList.toggle('is-pressed')+el.offsetHeight强制重绘，形成完整闭环
注意：cursor: pointer 在移动端不显示光标，但它会向 WebKit 发出明确信号：“这个元素要响应触摸”，从而激活事件分发链。
cursor: pointer 不起作用的常见原因
加了但依然没反应？检查这几个硬性条件：
比 cursor: pointer 更稳妥的替代方案
它只是兜底手段，真正健壮的做法应组合使用：
单独依赖 cursor: pointer 是脆弱的——它解决的是“事件是否派发”，而不是“过渡是否渲染”。一旦 JS 逻辑中断、class 切换顺序错乱、或 transition 声明位置错误，动画依然会跳变。真正可靠的移动端过渡，必须同时守住事件链、DOM 更新时机、CSS 声明结构这三道关。
