动态变涟漪颜色需用JS向涟漪容器设置--ripple-color变量，确保伪元素继承；必须设pointer-events:none防阻断点击；坐标计算要转为相对容器偏移；动画加will-change:transform提升图层但须动态增删。
点击涟漪的颜色怎么动态变？用 --ripple-color 变量控制
涟漪颜色不是写死在 CSS 里才灵活——得靠 JS 注入变量，再让 :after 或伪元素读取。否则每次换色都要重写样式或切换 class，维护成本高。
常见错误是直接在 JS 里改 element.style.setProperty('--ripple-color', 'red')，但忘了涟漪元素（通常是绝对定位的 :after）必须和目标元素共享同一作用域，否则变量不继承。
- 确保涟漪容器（比如按钮）声明了
position: relative，且伪元素用content: ""+position: absolute - JS 中设置变量时，必须作用于涟漪容器本身，不是 document 或 body：
btn.style.setProperty('--ripple-color', color) - 颜色值推荐用
rgb()或十六进制，避免 hsl() 在部分 Safari 版本中解析异常
pointer-events: none 必须加在涟漪层，否则会阻断后续点击
涟漪动画本质是盖一层临时 :after，如果没关指针事件，它会吃掉下一次点击，导致按钮“点不动”——尤其连点或快速操作时特别明显。
这不是兼容性问题，是行为逻辑缺陷。哪怕动画已结束、opacity 为 0，只要 DOM 节点还在且 pointer-events 是默认值，就仍参与事件捕获。
立即学习“前端免费学习笔记（深入）”；
- 涟漪伪元素必须显式声明
pointer-events: none - 不能只依赖
opacity: 0或transform: scale(0)来“隐藏”它 - 如果用真实 DOM 元素（非伪元素）做涟漪，也要同步加该样式，且建议用
remove()而非仅 hide
为什么 getBoundingClientRect() 算出的坐标要减去 offsetLeft/Top？
因为 getBoundingClientRect() 返回的是相对于视口的坐标，而涟漪要居中在按钮内部，得转成相对按钮左上角的偏移量。直接用会导致涟漪飘到屏幕角落。
尤其当按钮在滚动容器里、或有 transform 缩放时，offsetLeft/Top 不可靠，这时必须用 element.getClientRects()[0] 配合 scrollLeft/Top 手动修正，但多数情况用 boundingRect.left - element.getBoundingClientRect().left 更稳。
- 别用
event.clientX/Y直接减按钮offsetLeft/Top—— 它们坐标系不同源 - 如果按钮有
border或padding，涟漪起始点应扣掉clientLeft/clientTop，否则边缘点击时中心偏移 - 移动端需注意
touchstart的touches[0]坐标，不能混用clientX
CSS 动画卡顿？关键在 will-change: transform 和合成层
涟漪缩放动画如果只靠 transform: scale() + transition，在低端安卓或旧版 Chrome 上容易掉帧。不是代码写错，是浏览器没把它提升到独立图层。
加 will-change: transform 能提前提示合成器，但别滥用——只在涟漪元素创建瞬间加，动画结束立刻移除，否则长期占用内存，反而拖慢页面滚动。
- 不要在 CSS 规则里全局写
will-change: transform，必须 JS 动态 toggle - 避免同时对
transform和opacity做 transition，优先用transform+background-color实现渐隐 - Chrome DevTools 的 “Layers” 面板能验证是否成功合成：涟漪元素应显示为独立绿色图层
事情说清了就结束。最常被忽略的是变量作用域和 pointer-events，默认值比想象中更顽固。
