加touch-action: manipulation可消除300ms点击延迟，使click事件在touchend时立即触发，从而让按钮动画“跟手”；它通过禁用双击缩放判定来实现，不加速动画本身，仅移除浏览器等待窗口。
按钮点击动画延迟不是 CSS 动画本身慢，而是 click 事件被浏览器卡了约 300ms —— 加 touch-action: manipulation 能让 click 立即触发，动画自然就“跟手”了。
touch-action: manipulation 为什么能砍掉动画延迟
移动端浏览器（尤其是 iOS Safari）为支持双击缩放，默认在 touchend 后等 300ms 才派发 click。你的 :active 样式或 JS 动画都得等这个 click 触发后才开始，视觉上就是“点了没反应”。touch-action: manipulation 的作用是明确告诉浏览器：“这个元素只允许点击和单指滚动，别等双击”，于是 click 在 touchend 同步发出，动画立刻响应。
它不改 CSS 动画帧率，也不加速 JS 执行，只是把那个“等待窗口”直接关掉。
哪些按钮必须加 touch-action: manipulation
所有你期望“点下就有反馈”的非原生可点击元素：
立即学习“前端免费学习笔记（深入）”；
-
<div class="btn">、<span role="button">这类靠 JS 绑定onclick或框架@click的容器 - Bootstrap 的
.btn、.nav-link（原生<button>默认已优化，但若重写了display或覆盖了touch-action就得补） - React/Vue 中用
onClick或@click包裹的卡片、列表项、Tab 标签 - 自定义开关、轮播图箭头（注意：轮播图外层容器不能加，否则滑动失效）
加了还是有延迟？常见干扰项
真机测试发现动画仍滞后，大概率是以下情况之一：
- 父容器设了
touch-action: none（比如地图组件、Canvas 区域），子元素的manipulation会被继承阻断 - 项目里还残留
fastclick初始化代码 —— 它和touch-action冲突，会导致事件重复或丢失，查console.log(FastClick)或搜new FastClick，删掉 - CSS 选择器没生效：用 Chrome/Safari DevTools 的 Elements 面板看目标元素的 computed
touch-action值，确认是不是被更宽泛的规则（如* { touch-action: auto }）覆盖了 - 安卓低端机（如 Android 4.4 WebView）不支持
manipulation，可降级为touch-action: pan-y pinch-zoom+cursor: pointer
别踩 touch-action: none 这个坑
touch-action: none 看似“更彻底”，但它会让浏览器放弃所有手势管理：不仅没 click，连滚动、缩放、甚至 pointerdown 都可能不触发。你得自己监听 touchstart/touchend 并模拟点击逻辑，一不小心反而更卡。除非你完全接管整套触摸行为，否则别碰这个值。
真正要盯住的不是属性名，而是“浏览器是否认定这个元素无需双击判断”。每次加完，务必在真机上连点几次，听提示音、看 :active 变化、测快速切换响应 —— 延迟感这事，模拟器测不准。
