优先用纯CSS实现点击波纹动画，即通过:active+::after+radial-gradient，性能高、跨平台兼容好；避免Vue数据驱动方案因小程序不支持动态伪类、App端setTimeout精度差等问题导致的卡顿或残留动画。
直接说结论：uni-app 里实现点击波纹扩散动画，优先用纯 CSS（:active + ::after 伪元素 + radial-gradient），不依赖 JS 定时器或 Vue 响应式层叠管理；手动停止需求少、性能高、跨平台兼容好。
为什么不用 startWaveLoop 那套 Vue 数据驱动方案
那套方案在 H5 上能跑，但在微信小程序和 App 端会出问题：小程序不支持 v-for 渲染动态 ::after 伪类，且 this.$set 在多层嵌套中容易丢失响应；App 端 WebView 对 setTimeout 链式调用精度差，波纹不同步。实际项目里，你改一个 layers 数组长度，就得同步改三处时间计算（i*160、1000、400），稍不留神就卡顿或残留动画。
纯 CSS 方案规避了这些：所有动画由浏览器原生合成线程驱动，不占 JS 主线程，transition 自动中断上一次未完成的动画，天然支持“再次点击即重置”。
:active 伪类 + radial-gradient 的最小可行写法
关键不是堆效果，而是让波纹从点击点中心出发——这靠 background-position: center 和 transform: translate(-50%, -50%) 配合实现。下面这段可直接复制进 .scss 或 .css：
.ripple {
position: relative;
overflow: hidden;
}
.ripple::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(circle, rgba(0,0,0,0.15) 0%, transparent 70%);
background-repeat: no-repeat;
background-position: center;
opacity: 0;
transform: scale(0);
transition: transform 0.5s, opacity 0.5s;
pointer-events: none;
}
.ripple:active::after {
transform: scale(3);
opacity: 0.2;
}
注意几个硬约束：
-
overflow: hidden必须加在父容器上，否则波纹会溢出按钮边界 -
pointer-events: none要写在::after上，否则会影响子元素点击穿透 - 微信小程序里
background-image: radial-gradient兼容性没问题，但不能写成background: radial-gradient(...)（会忽略） - 如果按钮是
flex布局，确保父容器有明确宽高，否则100%计算失效
需要手动停止？别用定时器，用 class 切换
所谓“手动停止”，本质是中断当前正在播放的波纹动画。CSS 动画没有 stop() 方法，但你可以用 class 控制状态流：
给按钮加一个 is-paused 类，在 JS 里控制它：
.ripple.is-paused::after {
animation-play-state: paused;
}
然后在点击事件里切换：
handleClick() {
this.isPaused = !this.isPaused;
// 触发一次重绘，让伪元素重新计算
this.$nextTick(() => {
this.$refs.btn.classList.toggle('is-paused');
});
}
比维护 waveTimer 和 waveLooping 状态干净得多——你不需要管第几层、是否重置、有没有漏掉 clearTimeout，浏览器自己处理。
小程序真机调试时波纹偏移？检查 transform-origin
在 iOS 微信或某些安卓厂商 Webview 里，transform: translate(-50%, -50%) 可能因设备像素比（dpr）计算偏差导致波纹中心偏移。解决方案是显式指定原点：
.ripple::after {
transform-origin: center center;
/* 其他样式保持不变 */
}
另外，如果按钮用了 upx 单位，确保父容器没有 transform: scale() 类操作，否则 background-position: center 会按缩放后尺寸计算，造成错位。
最麻烦的点其实不在代码——而在于你得记住：每次改完波纹动画，必须在真机（尤其 iOS 微信）上点十次以上验证中心点是否稳定。这点没人提，但线上翻车最多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
