按钮伪元素波纹不居中是因为::after默认相对内容盒定位，需设position: relative到按钮、position: absolute;top:0;left:0;及transform: translate(-50%,-50)；JS须用getBoundingClientRect()计算点击偏移并写入--x/--y CSS变量，配合translateZ(0)开启硬件加速、全量transition和触控优化。
button伪元素波纹为什么总不居中
因为::after默认是相对按钮内容盒（content box）定位，不是相对于整个按钮边界。没设position: absolute或漏了top/left归零，波纹原点就偏了。
- 必须给按钮加
position: relative，否则::after会向上级定位上下文找position -
::after要设position: absolute; top: 0; left: 0;，再用transform: translate(-50%, -50)把圆心锚点拉回点击位置 - 点击坐标得通过JS动态写入
style.left和style.top，不能只靠CSS固定值
如何用JS捕获点击坐标并传给伪元素
伪元素不能直接读JS变量，得把坐标塞进内联样式，再让::after用left/top读取。关键在getBoundingClientRect()和鼠标相对于按钮的偏移计算。
- 监听
click事件，用event.clientX - button.getBoundingClientRect().left算X偏移 - 同理算Y偏移，注意减去
scrollTop（如果按钮在滚动容器里） - 把两个值设为
button.style.setProperty('--x', x + 'px')和--y，CSS里用left: var(--x); top: var(--y) - 别忘了每次点击前重置
::after的transform: scale(0)，否则连续点会卡住
scale + opacity过渡卡顿或闪一下
本质是浏览器没把::after图层提升，导致缩放触发重排（reflow）。opacity单独动画通常没问题，但和scale混用时，若没开启硬件加速，GPU不会接管。
- 给
::after加transform: translateZ(0)或will-change: transform（后者慎用，别写在常态上） - 过渡属性写全：
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease；别只写all - 确保
::after有明确宽高（比如width: 100px; height: 100px;），否则scale起点不可控 - Chrome下若仍卡，检查是否启用了
clip-path或filter——它们会阻止合成层提升
移动端点击无响应或延迟
本质是移动端300ms点击延迟没清除，或者touchstart没绑定，只绑了click。伪元素波纹依赖精确坐标，click在触摸设备上可能滞后且坐标不准。
- 优先用
touchstart代替click，并调用event.preventDefault()防滚动干扰 - 用
event.touches[0].clientX取触点，比clientX更准 - 加
cursor: pointer到按钮，iOS Safari才认它是可点击区域 - 别忘了在
touchend后手动清掉波纹状态，否则手指抬起时波纹还没收完
实际最难的是坐标归一化——不同设备DPR、缩放、iframe嵌套都会让getBoundingClientRect()返回值失真。真要全端稳定，得结合window.devicePixelRatio做一次校正，这点多数人直接忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
