购物车角标弹性跳动效果需用 CSS transform: scale() 配合自定义 cubic-bezier(0.68, -0.55, 0.27, 1.55) 实现回弹动画，通过 JS 对比新旧数量精准触发一次，确保绝对定位、不触发重排，并优化移动端渲染。
在 H5 页面中实现购物车角标（如右上角小红点里的数字）跳动时的弹性膨胀过渡效果，核心是结合 CSS 动画 + `transform: scale()` + `cubic-bezier()` 自定义缓动函数，让数字“弹一下”而非生硬缩放。
用 CSS keyframes 配合弹性贝塞尔曲线
直接使用 animation-timing-function: ease-out 不够“弹”，需手写一个模拟弹簧回弹的贝塞尔值，例如 cubic-bezier(0.68, -0.55, 0.27, 1.55)（常见弹性缓动之一）：
- 定义动画：
animation: bounce 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes bounce {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
- 触发时只需给角标元素临时添加该 class（如用 JS 切换）；动画结束后自动恢复原状，无需手动移除 class（可配合
animation-fill-mode: forwards控制终态，但此处不需要，因终点就是 scale(1)）。
避免布局抖动：确保角标脱离文档流
如果角标是绝对定位的伪元素或子元素，要确认它不会因 scale 放大而影响父容器尺寸或触发重排：
- 给角标容器设置
position: absolute，并用top/right精确定位 - 确保父容器有
position: relative作为定位上下文 - 不要对
width/height做动画，只用transform: scale()—— 它走 GPU 合成层，性能好且不触发 layout
数字变更时精准触发一次动画
不能每次渲染都播动画（比如频繁加减商品），应只在数字实际变化时播放一次：
- 用 JS 对比新旧数量，仅当
oldCount !== newCount时执行：
badgeEl.classList.remove('cart-badge--bounce');
void badgeEl.offsetWidth; // 强制 reflow，确保 class 移除生效
badgeEl.classList.add('cart-badge--bounce');
}
- 为防止连续快速操作叠加动画，可在动画开始前先清除已有动画状态（如上面的 remove + offsetWidth）
移动端兼容性与体验优化
H5 在 iOS Safari 或安卓 WebView 中可能对 transform 动画有细微差异：
- 加上
transform-origin: center确保缩放以中心为基点（尤其数字宽度不一时） - 启用硬件加速：加
will-change: transform（仅在动画期间设置，用完可移除） - 若角标含文字，注意 font-smoothing 和 subpixel rendering，iOS 上可加
-webkit-font-smoothing: antialiased防止缩放后发虚
