纯用:active伪类+内联style无法实现真实波纹效果——:active不接收坐标，style无法动态更新left/top/scale；浏览器不解析style属性值用于定位，生命周期过短撑不起完整动画，且CSS无运行时计算能力。
纯用 :active 伪类 + style 属性（比如内联 style="..."）无法实现真实点击波纹效果——:active 不接收坐标，style 属性也无法在点击瞬间动态更新 left/top/scale 值。必须靠 JavaScript 获取点击位置并插入 DOM 或设置 CSS 变量。
为什么 :active + 内联 style 行不通
浏览器不会在 :active 触发时重新解析或重写元素的 style 属性；它只读取已存在的静态值。你写 <a href="#" style="left: 10px; top: 20px">Link</a>，再加 a:active::after { left: attr(style); } 是无效的——CSS 不支持从 style 属性提取数值用于定位。
-
:active生命周期极短，松开鼠标就失效，撑不起一个完整的 scale + fade 动画 - 内联
style是固定字符串，不能响应每次点击的clientX/clientY - CSS 无运行时计算能力，无法把“点击坐标”转成“相对按钮左上角的偏移”
a 标签实现波纹必须先加 position: relative
<a></a> 默认是 display: inline，不产生定位上下文。所有绝对定位的波纹元素（无论是 ::after 还是 JS 插入的 <span></span>）都会相对于 body 定位，导致波纹飞出链接区域。
- 必须显式设置
a.ripple-link { position: relative; overflow: hidden; } - 如果
<a></a>在 Flex/Grid 容器里，父容器没定位，也不能依赖父级——得单独给<a></a>加relative - 别用
position: absolute替代，否则链接会脱离文档流，影响排版和可访问性
用 JS 动态设 left/top 比改 style 属性更可靠
不要试图用 element.setAttribute('style', 'left: ...; top: ...') 去控制波纹位置。直接操作 element.style.left 和 element.style.top 更快、更可控，且能配合 getBoundingClientRect() 精确计算。
- 监听
click（桌面）和touchstart（移动端），用e.touches?.[0] || e统一取坐标 - 计算相对偏移：
const rect = link.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; - 创建波纹元素后立即设
ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; - 务必加
ripple.style.transform = 'translate(-50%, -50%)';，让圆心对准点击点
动画结束必须手动清理，否则内存泄漏
每个点击都新建一个波纹元素，但浏览器不会自动回收已播放完动画的节点。高频点击下 DOM 节点持续堆积，页面变卡。
- 监听
animationend或transitionend事件，在回调里调用ripple.remove() - 避免用
setTimeout延迟删除——动画时长受 CSStransition或@keyframes控制，硬写毫秒值容易错配 - 如果用了 Tailwind 的
animate-*类，仍需监听animationend，因为类名只是触发器，不管理生命周期
真正难的不是写出动画，而是让每个波纹都精准落在点击位置、不干扰后续交互、不累积 DOM 节点——这三点漏掉任一，效果就断层。
