用::after而非::before，因::after默认渲染在内容层之上且z-index控制更稳；而::before在Safari 12.1前对transform动画支持不稳定，易致卡顿或失效。
为什么用 ::after 而不是 ::before 实现波纹
因为 ::after 默认渲染在元素内容层之上，z-index 控制更稳；而 ::before 在 Safari 12.1 之前对 transform 动画支持不稳定，容易导致波纹卡顿或不触发。实际项目中只要确保伪元素是绝对定位、content: ""、透明度初始为 0，并覆盖整个按钮区域就行。
@mixin ripple-effect() 封装时必须传哪些参数
SCSS 封装波纹效果不能只写一个空 mixin，否则无法适配不同主题和尺寸。推荐至少支持以下三个参数：
-
$color: rgba(255, 255, 255, 0.3)—— 波纹背景色，避免写死，方便深色/浅色主题切换 -
$duration: 0.4s—— 动画时长，太短（如 0.2s）会“闪一下就收”，太长（>0.6s）拖沓 -
$easing: cubic-bezier(0.25, 0.46, 0.45, 0.94)—— 缓动函数，这个值比ease-out更有弹性感，Material Design 官方推荐
别漏掉 overflow: hidden 和 position: relative 的基础样式——它们不属于动画逻辑，但缺一不可，建议在 mixin 外统一加到按钮类上。
如何让 SCSS 生成的波纹支持点击坐标定位
纯 CSS 无法读取 clientX/clientY，所以 SCSS 本身不处理坐标计算，但它可以预留变量接口供 JS 注入。关键点是用 CSS 自定义属性替代硬编码位置：
- 在
::after中写left: var(--ripple-x, 50%); top: var(--ripple-y, 50%); transform: translate(-50%, -50%) scale(0); - JS 触发时只需设置
el.style.setProperty('--ripple-x', x + 'px');，无需操作 class 或 DOM 插入 - SCSS mixin 里要显式声明
pointer-events: none，否则连续点击可能拦截事件
漏掉 pointer-events: none 是线上最常被忽略的坑——它不会报错，但用户快速连点时会发现第二次点击无响应。
动画结束后 DOM 残留或性能卡顿怎么办
SCSS 只管样式，但动画清理必须由 JS 配合完成。常见错误是只加 animation 不监听结束：
- 用
transition（非@keyframes）方案：动画结束靠transitionend事件移除临时 class，否则旧波纹状态会干扰下一次触发 - 用
@keyframes方案：必须加animation-fill-mode: forwards+opacity: 0结尾帧，否则动画一停就回弹出残影 - 别在伪元素上用
background-size动画——它强制重绘，iOS 上尤其卡，transform: scale()是唯一推荐路径
真正难的不是写出波纹，而是让连续点击不堆积、不卡顿、不偏移。所有封装都得围绕这三点做约束，而不是堆炫技参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
