使用 transform: scale() 实现按钮点击缩放是唯一靠谱做法，它走 GPU 合成层，不触发 layout 或 paint；需配合 transition: transform 精确控制动画，避免 transition: all；优先用 :active 伪类，注意 Safari 需 cursor: pointer 或空 onclick 触发；移动端确保点击区域 ≥44×44px 并加 touch-action: manipulation。
button点击时缩放但不触发页面重排
直接用 transform: scale() 是唯一靠谱做法，它走 GPU 合成层，不会触发 layout 或 paint。别碰 width/height 或 margin 动画，那些会让浏览器反复计算布局，卡顿明显。
常见错误是加了 transition: all 0.3s —— 这会把所有属性都拖进过渡队列，哪怕你只改了 scale，浏览器也得监听一堆无关变化，白耗性能。
- 只写明确要动的属性：
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) - 贝塞尔曲线选这个是因为它模拟“先快→压住→回弹”的物理感，比
ease-out更像真实按压反馈 - 别在
:hover里做缩放，用户点不到按钮边缘时会失效；必须绑定到:active或 JS 的click+classList
用:active伪类实现最简缩放回弹
纯 CSS 方案够用，前提是不要求“松手后继续回弹”或“多点同时按压”。:active 在触摸设备上也生效（iOS/Android 都支持），但要注意 Safari 有个老毛病：默认禁用 :active 样式，得加 cursor: pointer 或监听空 onclick 才触发。
- 基础写法：
button:active { transform: scale(0.95); } - 必须配
transition，否则是瞬切，没动画效果 - 缩放值别低于
0.9，太小会导致文字模糊（subpixel rendering 失效） - 如果按钮有
border-radius，缩放时圆角会轻微失真，这是渲染限制，无法避免
JS控制class实现更可控的缩放节奏
需要“按下→保持缩放→松手后额外回弹一帧”就得用 JS。CSS 的 :active 只撑到手指离开瞬间，没法延展后续动画。
关键不是加 class，而是加完立刻用 getComputedStyle 强制触发重绘，否则 class 切换和 transform 动画可能被合并，导致第一帧丢失。
- 给 button 绑定
mousedown（非click，后者太晚）：el.addEventListener('mousedown', () => el.classList.add('is-pressed')) - 松手时用
mouseup+mouseleave双保险移除：el.addEventListener('mouseup', () => el.classList.remove('is-pressed')) - CSS 里写两段：
.is-pressed { transform: scale(0.95); } .is-pressed::after { content: ''; animation: bounce-back 0.3s forwards; }（用伪元素承载回弹动画更轻量）
移动端点击区域小导致缩放失效
iOS Safari 和部分安卓 WebView 对 :active 的激活范围极其苛刻：如果按钮实际可点击区域小于 44×44px，或者父容器有 overflow: hidden 裁剪了点击热区，:active 根本不触发。
- 检查按钮的
min-width/min-height是否 ≥ 44px（苹果人机指南硬性要求） - 用
touch-action: manipulation告诉浏览器“这是按钮，别等双击或滑动”，能提升响应速度 - 真机调试时，打开 Safari 开发者工具的 “Touch Simulation”，看
:activeclass 是否真的被加上——很多问题其实卡在样式没生效，而不是动画逻辑错
缩放本身很简单，难的是让每个设备、每种手势路径都走到同一套动画流程里。最常漏掉的是 touch 设备的 active 触发条件和 Safari 的渲染策略，调不出来先查这两块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
