按钮点击无反馈主因是:active被覆盖、transform缺transition或移动端未触发事件；需显式声明:active样式、加touch-action、避免pointer-events遮挡，动效优先用transition，复杂轨迹用JS动画。
按钮点击没反馈，大概率不是动效没写，而是:active被覆盖、transform没配transition、或者移动端根本没触发事件。动效本身很简单，关键在状态控制和触发时机。
button:active 为什么经常失效？
浏览器默认的 :active 只持续几十毫秒，且极易被全局样式重置。比如写了 * { outline: none; } 或 button { all: unset; }，就会直接干掉所有伪类行为。
- 必须显式声明
button:active { transform: scale(0.96); }，别依赖默认 - 确保没有
!important覆盖了:active规则（查 DevTools 的 Styles 面板） - 移动端要加
touch-action: manipulation，否则可能不触发:active - 如果用了
pointer-events: none或父元素遮挡，:active也压根不会生效
用 CSS transition 还是 JavaScript animate？
简单按压反馈用 transition 就够；抛物线飞入购物车这类动态轨迹，必须用 JS 实时计算坐标 + element.animate() 或 requestAnimationFrame。
-
transition: transform 0.2s ease-out配合:active，适合基础缩放/位移 - 别用
top/left做动画——会触发布局重排，卡顿明显；只用transform和opacity - 抛物线动画里，
getBoundingClientRect()必须在 DOM 渲染后调用，推荐包在requestAnimationFrame(() => { /* 获取坐标 */ })里 - 动画结束必须手动清理：移除临时
div、取消event listener、重置aria-busy
防重复点击和加载状态怎么同步？
光加个 .loading 类名远远不够。用户连点、网络延迟、接口失败都会让 UI 和真实状态脱节。
- 点击瞬间立刻执行
btn.disabled = true和btn.setAttribute('aria-busy', 'true') - fetch 成功或失败后，统一恢复：
btn.disabled = false、btn.removeAttribute('aria-busy') - 别只靠 class 切换视觉状态——DOM 属性才是唯一可信的状态源
- 失败时不要静默，用
response.status判断：401 跳登录，400 解析response.json()提示“库存不足”
最常被跳过的一步是坐标获取时机——getBoundingClientRect() 在 DOM 尚未渲染完成时调用，返回的 top/left 是 0 或错误值，导致小球直接飞出屏幕。这个坑没法靠 CSS 修复，只能靠 JS 执行顺序兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
