CSS用Sass实现点击波纹效果，Mixin封装动画

本文深入解析了如何用 Sass 高效、健壮地实现点击波纹（Ripple）效果——它并非依赖 JS 绘图，而是巧妙结合 `::after` 伪元素、`transform: scale()` 动画与透明度过渡，在保证高性能（避免重排）的前提下营造出流畅的视觉反馈；Sass 的核心价值在于通过参数化 `@mixin ripple($color, $size, $duration)` 统一管控主题适配、尺寸响应和动效节奏，而真正可靠的交互则需 JS 精准控制 `.is-rippling` 类的添加与移除时机（监听 `touchstart`/`mousedown` 并在 `animationend` 清理）、坐标定位（兼顾移动端多点触控与 iOS 延迟）、以及边界防护（如 `disabled` 检查与节流），揭示了看似简单的波纹背后，是 CSS 结构约束、Sass 工程化思维与跨端事件处理深度协同的结果。

波纹效果的本质是伪元素 + 动画 + transform

点击波纹（Ripple）不是靠 JS 画圆，而是用 ::after 伪元素动态生成一个圆形遮罩，再用 transform: scale() 从中心点放大、透明度渐变收尾。Sass 的价值不在“实现动画”，而在统一控制尺寸、颜色、持续时间这些变量，避免每个按钮都写一遍重复的 @keyframes 和 transition。

关键约束：伪元素必须设 position: absolute，父容器得是 position: relative，否则波纹会脱出边界；而且不能用 width/height 动画——性能差，还容易触发重排。

用 @mixin ripple 封装时必须传入颜色和尺寸参数

硬编码 $color: rgba(255,255,255,0.3) 看似省事，但深色主题按钮需要浅色波纹，禁用态又要灰掉，不传参就只能复制 mixin 或后期覆盖。尺寸同理：$size 决定波纹最大半径，它应该和按钮高度相关（比如 max(100px, 2 * $button-height)），而不是固定 200px。

• @mixin ripple($color, $size: 200px, $duration: 0.5s) —— 三个参数都设默认值，但调用时至少传 $color
• 内部用 abs($size) 防止负值传入导致 scale() 异常
• 动画曲线建议用 cubic-bezier(0.25, 0.46, 0.45, 0.94)，比 ease-out 更自然

绑定事件要靠 JS 触发 .is-rippling 类，不是纯 CSS

Sass 只管样式，无法监听点击。必须用 JS 在 mousedown 时加类，在 animationend 后移除。常见错误是直接监听 click——波纹还没开始放缩就移除了类，动画被中断；或者忘了清空旧的 ::after，导致多次点击堆叠多个伪元素。

• JS 只需操作类名：el.classList.add('is-rippling')，Sass 里写 .btn.is-rippling::after 即可
• 务必在 animationend 回调里用 el.classList.remove('is-rippling')，别依赖 setTimeout
• 如果按钮有 disabled 属性，JS 层要提前 return，否则 disabled 按钮也能触发波纹

移动端点击延迟和多点触控会破坏波纹定位

PC 上用 clientX/clientY 算偏移很稳，但移动端 touchstart 的 touches[0] 坐标才是真实触点；更麻烦的是，iOS Safari 默认 300ms 点击延迟，mousedown 触发太晚，波纹看起来“卡一下”。另外，双指点击会触发两次 touchstart，可能生成两个波纹。

• 优先监听 touchstart，降级到 mousedown；用 event.touches?.[0] || event 兼容取坐标
• 给按钮加 touch-action: manipulation，消除 iOS 300ms 延迟
• 在 JS 中加节流：if (el.rippling) return; el.rippling = true;，动画结束再置 false

CSS 波纹的复杂点从来不在动画本身，而在于坐标计算的时机、伪元素的层叠上下文、以及移动端事件模型和 PC 的差异。少一个 position: relative，或 JS 里漏掉一次 remove，效果就断掉。

到这里，我们也就讲完了《CSS用Sass实现点击波纹效果，Mixin封装动画》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！