应使用 transform: scale() 实现购物车数量变化的微缩放动画，配合 will-change: transform 或 translateZ(0) 升层，避免 width/height 触发重排；用 CSS 类名控制动画、transitionend 清理、pointer-events 锁定交互，并为 iOS 12.0 及以下提供 opacity fallback。
transition 用 transform: scale() 实现微缩放，别碰 width/height
购物车数量变化时想加个“微微一缩再弹回”的反馈，直接对 width 或 height 做 transition 会卡顿、掉帧，尤其在低端手机上。因为宽高变化会触发重排（reflow），浏览器得重新计算整个布局树。
真正该动的是 transform: scale() —— 它走 GPU 合成层，不触发重排，动画丝滑。关键点：必须搭配 will-change: transform 或给父容器加 transform: translateZ(0) 来提前升层，否则 iOS Safari 可能仍走 CPU 渲染。
-
scale(0.95)是常用起始值，缩得太狠（比如0.8）会让数字模糊，尤其小字号 - 过渡时间控制在
0.2s以内，超过0.25s就显得拖沓，用户感知为“延迟”而非“反馈” - 别用
scaleX()或scaleY()单独缩，数字容易被压扁或拉长，失真
数量更新时只触发动画类名，别 inline style
每次 JS 改 innerText 都去手动加 style.transform，既难维护又容易和 CSS 动画冲突。正确做法是用一个开关类名（比如 cart-count--pulse），靠 CSS 规则驱动动画，JS 只负责增删这个类。
否则会出现：用户快速连点加购，JS 多次写 style.transform，中间状态被覆盖，动画中断或错乱；或者旧动画还没结束，新动画又插进来，叠加出诡异形变。
立即学习“前端免费学习笔记（深入）”；
- 动画结束后立刻用
element.classList.remove('cart-count--pulse')清掉类名，避免重复触发 - 用
element.addEventListener('transitionend', handler, { once: true })确保只响应一次结束事件 - 如果数字是通过 Vue/React 更新的，别在
watch或useEffect里直接操作 DOM，封装成指令或自定义 Hook 更稳妥
IE11 和 iOS 12 以下需 fallback 到 opacity 闪动
transform: scale() + transition 在 IE11 和 iOS 12.0 之前版本有兼容问题：动画可能不执行、缩放中心偏移、甚至整个元素消失。这时候硬撑 scale 不如退到更稳的 opacity 闪动。
不是所有用户都值得为 0.3% 的老设备写 polyfill，但至少要保证功能可用、视觉不崩。可以用 @supports (transform: scale(1)) 区分样式，或用 document.body.classList 检测特性后加载对应 CSS。
- fallback 动画用
opacity: 0.7 → 1，持续0.15s，比 scale 更轻量，老设备也能跑满帧 - 别用
visibility: hidden，它不支持过渡，只能硬切，毫无反馈感 - iOS 12.1+ 已修复大部分 scale 过渡 bug，所以 UA 判断只需切到
iOS 12.0及以下
避免动画过程中用户误点：过渡期禁用 pointer-events
数量从 1 变 2 的缩放动画还没结束，用户又点了减号，结果数字变成 0，但动画还停留在“从 2 缩回来”的途中——视觉和状态就脱节了。这不是动画问题，是交互逻辑没锁住。
最简单的防御是：只要开始动画，就给计数器元素加 pointer-events: none；动画结束再恢复。CSS 里用 .cart-count--pulse { pointer-events: none; } 就行，不用 JS 控制，减少竞态风险。
- 别只禁用
click，触摸屏还要防touchstart，pointer-events: none一并屏蔽 - 禁用期间，光标应保持默认（
cursor: default），别留cursor: pointer给用户错误暗示 - 如果按钮本身有 loading 状态，这里要和动画禁用同步，否则用户会以为“点了没反应”
pointer-events 锁定和 iOS 12 兼容兜底——前者导致体验割裂，后者让部分真实用户看到空白或错位。 
