波纹动画卡顿或不触发，主因是事件绑定时机错误或节点定位失准；需确保按钮有position: relative，用addEventListener绑定click/touchstart，动态计算波纹尺寸与坐标，并用transitionend清理DOM。
波纹动画卡顿或不触发？检查事件绑定时机
按钮点击波纹本质是动态插入一个 span 元素并用 CSS 动画扩散。常见卡顿或不触发，往往不是动画写得不对，而是事件监听没绑在正确节点或时机上。
- 必须确保按钮本身有
position: relative（否则波纹absolute定位会错位） - 用
addEventListener('click', ...)，别用onclick内联属性——后者无法可靠获取event.clientX/clientY - 如果按钮是动态插入的（如 Vue/React 渲染后），需在元素挂载完成后再绑定，否则监听器根本没生效
- 移动端注意加
touchstart事件，仅靠click在部分 Android 上有 300ms 延迟且坐标不准
波纹尺寸和颜色怎么动态适配按钮？用 JS 计算而非固定值
硬编码波纹直径（如 width: 100px）会导致小按钮溢出、大按钮波纹太小。真正适配得靠 JS 实时算：
- 取按钮宽高中的较大值作为波纹最大直径：
Math.max(btn.offsetWidth, btn.offsetHeight) - 波纹起始点用
event.clientX - btn.getBoundingClientRect().left算相对坐标，避免滚动时偏移 - 颜色建议从按钮背景色提取：可读取
getComputedStyle(btn).backgroundColor，但更稳妥是显式传入 data 属性，比如data-ripple-color="#2196f3" - 动画持续时间设为
350ms左右较自然；过短像闪，过长拖沓
多个波纹同时触发导致重叠混乱？加清理机制
快速连点或鼠标拖动点击，容易生成多个波纹 DOM 节点堆叠，动画打架、内存泄漏。
- 每次创建新波纹前，先调用
btn.querySelectorAll('.ripple')并.forEach(ripple => ripple.remove()) - 或更轻量：给波纹加 class
ripple，CSS 设置.ripple { pointer-events: none; }防止干扰后续点击 - 不要用
setTimeout延迟删除——动画结束时间应由 CSStransitionend事件驱动，更精确 - 注意：若用
requestAnimationFrame插入波纹，要确保它在样式计算前执行，否则可能第一次渲染位置异常
为什么 Safari 上波纹边缘模糊或不圆？CSS transform 和 will-change 的坑
Safari 对 border-radius + transform: scale() 组合渲染不稳定，尤其低版本 iOS。
立即学习“前端免费学习笔记（深入）”；
- 波纹元素必须设
border-radius: 50%，且不能依赖父容器裁剪 - 避免用
transform: scale(0) → scale(1)，改用width/height: 0 → Npx+opacity动画，兼容性更好 - 加
will-change: transform可能反而让 Safari 重绘异常，实测多数情况去掉更稳 - 若仍模糊，尝试强制硬件加速：
transform: translateZ(0)，但仅在必要时加，避免过度触发合成层
波纹看着简单，实际要稳住体验，关键在坐标计算精度、DOM 生命周期控制、以及 Safari 这种“特别”的渲染逻辑。别省略 getBoundingClientRect() 和 transitionend 的处理，漏掉一个，用户就会觉得“点着不跟手”。
