移动端transition失效主因是:hover不触发、:active依赖可交互元素，须用原生button等或js控制class；需设合适touch-action、仅对transform/opacity做过渡、避免重排，并优化事件响应链。

transition 触发条件在触屏上不成立

移动端 transition 不动，大概率不是 CSS 写错了，而是触发源没对上。CSS 的 :hover 在绝大多数触屏设备上根本不会触发——手指悬停不存在，:active 也只在 touchstart 到 touchend 之间极短时间生效，且依赖元素是否可聚焦或有语义。

常见错误现象：button:hover { opacity: 0.7; } 在 iPhone 上完全没反应；用 div 模拟按钮加 :active，点下去也没缩放或变色。

• 必须用原生可交互元素（button、a、input[type="button"]）才能稳定触发 :active
• 给非语义元素加 role="button" 并不能恢复 :active，iOS Safari 和微信 X5 内核直接忽略
• 真要靠状态切换过渡，改用 JS 控制 class：监听 touchstart 立即加 is-pressed，touchend 或 touchcancel 移除
• 所有过渡属性优先选 transform 和 opacity，避免 height 或 margin——它们会触发重排，卡顿明显

touch-action 属性直接影响 transition 是否“跟手”

过渡动画卡顿、拖拽时跳帧、手指一抬动画就中断？很可能是 touch-action 把浏览器的合成层调度给锁死了。这个属性不是“锦上添花”，它直接决定手势事件是否交由 compositor 处理。

错误写法：touch-action: none 套在整个菜单容器上 → 手指滑动时 transition 突然卡住，甚至整个区域点不动。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• touch-action: manipulation 是按钮/卡片类元素最安全的选择，等价于 pan-x pan-y pinch-zoom，允许系统优化点击与轻扫
• 下拉列表区域必须设 touch-action: pan-y，否则 transform: translateY() 过渡会被滚动抢占
• 横向轮播容器用 touch-action: pan-x，禁用垂直滚动干扰，让 transform: translateX() 动画更连贯
• 绝对不要在 button 上设 touch-action: none —— 它会同时废掉 click、focus、:active 三重通道

移动端 transition 性能陷阱：重排 vs 合成

你以为加了 will-change: transform 就万事大吉？在低端安卓机或 iOS 12 以下，它反而可能触发强制重绘，让动画更卡。真正起效的是“只动合成属性 + 避免 layout 触发”。

实测对比：同样一个 scale(0.96) 过渡，在老 iPad 上，用 padding 缩放比用 transform 慢 3 倍以上。

• 只对 transform、opacity、filter 做 transition —— 它们走 GPU 合成层，不触发 layout/paint
• 避免用 height、width、margin、padding 做过渡，哪怕只是 1px 变化，也会强制同步重排
• will-change 不要全局加，只在真正需要提升的元素上按需设置，且 transition 结束后手动清除（用 JS 切 class 或监听 transitionend）
• 开启 Chrome DevTools → Rendering → Paint flashing，真机调试时看哪些区域在“狂闪”——闪的就是重绘区

触摸反馈延迟导致 transition “看起来慢”

用户手指一碰，transition 却延迟几十毫秒才动？这不是动画慢，是事件链太长。从 touchstart 到 JS 更新 class，再到浏览器触发 transition，中间每一步都可能被拖累。

典型瓶颈：DOM 深度超 6 层 + 用了 document.querySelector 查找目标 + 在 touchstart 里做复杂计算。

• 把过渡 class 的 toggle 逻辑塞进 touchstart 回调第一行，别等 touchend —— 用户感知的是“按下即响应”
• 确保绑定事件的元素就是最终要加 class 的那个，别靠冒泡再查一次 DOM
• 用 pointerdown 替代 touchstart 更省心：兼容触控/鼠标/笔，无 passive 限制，且现代浏览器默认支持
• 测试真实延迟：真机上打开 Safari Web Inspector → Timelines → Record，点几次按钮看从 touchstart 到 style recalcs 耗时是否超过 16ms（60fps 下限）

过渡效果在触屏上是否“跟手”，关键不在动画本身多炫，而在于事件是否即时捕获、属性是否走合成层、以及 DOM 结构是否足够扁平。很多所谓“性能优化”，其实是先砍掉一层无意义的 div 包裹，比加十个 will-change 都管用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！