按钮点击时涟漪不居中是因为::after伪元素定位基准未对齐点击位置，需用JavaScript计算相对坐标并设置left/top减去半径，配合transform-origin:center、px单位、animationend清理及Safari兼容处理。
按钮点击时涟漪不居中
根本原因是 ::after 伪元素的定位基准没对齐点击位置，而是默认以按钮左上角为原点。浏览器不会自动把涟漪中心“锚定”到鼠标点，得手动算。
- 必须用 JavaScript 拿到
e.clientX和e.clientY，再减去按钮getBoundingClientRect()的left/top，得到相对坐标 -
::after要设position: absolute，且父按钮必须是position: relative - 设置
left和top时，要减去半径（width/2），否则涟漪圆心会偏右下 - 别用
%或vw定位，必须用px动态赋值，否则响应式下错位
CSS关键帧里 transform 缩放失效
常见于直接写 transform: scale(0) → scale(1) 却没扩散效果——因为没设 transform-origin，缩放中心默认是元素左上角。
- 伪元素
::after必须显式加transform-origin: center，否则涟漪从一角炸开 - 动画属性要写全：用
transform: scale(0)而不是scaleX(0) scaleY(0)，后者可能触发硬件加速异常 - 如果按钮有
border-radius，涟漪圆角需保持一致，否则边缘穿帮；建议伪元素也设相同border-radius - 慎用
will-change: transform，低端安卓 WebView 下可能导致闪屏或卡顿
多次快速点击导致涟漪堆叠或残留
本质是事件未节流 + 伪元素未及时清理。每个点击都新建一个 ::after 实例（实际是 JS 动态加 class 触发），旧动画没结束，新动画又覆盖上去。
- 给按钮加防抖：记录上一次涟漪的
timeoutID，触发前先clearTimeout - 动画结束必须监听
animationend事件，然后移除涟漪 class，不能只靠 CSSanimation-fill-mode: forwards - 避免用
opacity: 0隐藏残留元素，要真正remove()或重置display: none - 移动端要考虑
touchstart替代click，否则有 300ms 延迟，连点更易堆叠
伪元素涟漪在 Safari 上不触发或闪烁
Safari 对动态插入的伪元素动画支持不稳定，尤其在 content: '' + animation 组合下，容易跳帧或首次不播。
- 必须给伪元素加
pointer-events: none，否则可能拦截后续点击 - Safari 需要显式声明
animation-timing-function，不能只靠浏览器默认，推荐用cubic-bezier(0.4, 0, 0.2, 1) - 避免在伪元素上用
background: radial-gradient模拟涟漪，Safari 渲染慢且易糊；老老实实用纯色 +opacity渐变 - 真机调试时注意：iOS 15+ 开启了
prefers-reduced-motion的用户，涟漪应被 CSS 媒体查询禁用，否则违反可访问性
事情说清了就结束。真正难的不是写出来，是让每个点击都精准、轻量、不抢焦点、不干扰语义，还兼容老 Safari —— 这些细节藏在事件绑定时机、伪元素生命周期和 Safari 的渲染管线里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
