按钮震动反馈通过transform: translate()配合@keyframes实现视觉抖动，需避免布局重排、重置transform基准、同步状态并精准控制动画时长与节奏。
点击按钮怎么触发震动反馈
震动不是靠 HTML 或 CSS 自带能力，而是用 transform: translate() 快速来回位移 + animation-timing-function 控制节奏实现的视觉“抖动”。本质是 0.1 秒内让按钮在 X 轴（或 Y 轴）上做小幅度、非线性偏移，比如 -2px → +2px → -2px → 0，人眼感知为“咔哒”一震。
常见错误是直接改 left/top——这会触发布局重排，卡顿明显；必须只动 transform，且搭配 will-change: transform 提前提示浏览器。
- 推荐用
@keyframes shake定义 5–7 帧，首尾为transform: translate(0)，中间奇数帧交替正负偏移（如translate(-3px, 0)/translate(3px, 0)） - 动画时长控制在
0.2s–0.3s，太长像晃悠，太短看不出效果 - 别用
infinite或循环，单次点击只播一遍；播完必须清状态，否则连续点会叠加动画队列 - 移动端要加
touch-action: manipulation防止点击延迟干扰震动节奏
震动动画该挂在哪一层：button 元素还是伪元素？
直接挂 button 本体最稳妥。伪元素（::before/::after）虽可隔离样式，但震动时若按钮有圆角、阴影或 border，伪元素偏移后容易露底边、错位，尤其 Safari 下渲染不稳定。
更关键的是：震动需和按钮禁用状态（disabled）、加载态（aria-busy）同步。如果用伪元素，JS 控制主按钮状态时还得额外操作伪元素，徒增耦合。
- 给按钮加 class：
class="add-to-cart shake-trigger" - 震动类用
animation: shake 0.25s cubic-bezier(.36,.07,.19,.97)—— 这个贝塞尔值模拟机械回弹感，比线性更真实 - 震动过程中保持
pointer-events: none，避免用户在动画未结束时再次点击 - 动画结束后自动移除
shake-trigger类，用animationend事件监听，别依赖setTimeout
为什么震动后按钮位置偶尔偏移或跳动
根本原因是动画没重置 transform 基准。如果按钮本身已有 transform: scale(0.98)（比如悬停缩放），再叠加 translate() 震动，最终矩阵运算会累积偏差，尤其在 Safari 和旧版 Chrome 中明显。
解决办法只有一个：所有震动动画都基于 clean slate 启动。要么确保按钮初始 transform: none，要么在震动前用 JS 显式重置：
button.style.transform = 'none';
button.offsetWidth; // 强制重排，确保 reset 生效
button.classList.add('is-shaking');
- 别在 :hover 或 :active 里写 transform 动画，和震动冲突概率极高
- 如果用了 CSS-in-JS 或框架（如 React），确保震动 class 的优先级高于其他 transform 样式
- 震动结束回调里检查
getComputedStyle(button).transform是否为matrix(1, 0, 0, 1, 0, 0)，不是就手动清空
移动端震动反馈失效或不同步
不是所有手机都支持硬件震动 API（navigator.vibrate()），而且它和 UI 震动是两回事：前者是马达震动，后者是视觉抖动。这里讨论的是后者，失效通常因 touch 事件穿透或渲染延迟。
典型现象：手指按下去，震动动画没起，松手才闪一下。这是因为 touchstart 触发太早，DOM 还没响应 :active 状态，或 requestAnimationFrame 没对齐屏幕刷新节奏。
- 监听
touchstart和mousedown双事件，但只执行一次震动逻辑（用 flag 防重复） - 震动 class 添加必须放在
requestAnimationFrame回调里，而不是直接classList.add - 确保按钮父容器没有
overflow: hidden或clip-path，否则震动位移部分会被裁掉 - iOS Safari 对快速连续
transform更新较敏感，可加transform: translateZ(0)强制 GPU 层，但仅在震动开始前加，结束后立刻移除
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
