如何实现平滑的按钮水波纹动效（Ripple Effect）-js教程-PHP中文网

如何实现平滑的按钮水波纹动效（Ripple Effect）

本文详解如何通过 css 过渡（transition）或 web animations api 实现真实、流畅的按钮点击水波纹效果，并解决“动画不触发”“元素堆积”“定位偏移”等常见问题。

本文详解如何通过 css 过渡（transition）或 web animations api 实现真实、流畅的按钮点击水波纹效果，并解决“动画不触发”“元素堆积”“定位偏移”等常见问题。

在前端交互设计中，水波纹（Ripple Effect）是一种广受青睐的视觉反馈机制——它能直观传达用户操作已被响应。但许多开发者会遇到这样的问题：明明写了 transition，也添加了触发类名（如 .active），可动画却“一闪而过”甚至完全不可见。根本原因在于：CSS transition 不会响应“初始渲染时的样式状态”，只对 DOM 元素在已存在状态下发生的样式变更生效。

在原始代码中，newClick 元素被创建 → 立即添加 .point 和 .active 类 → 立即插入 DOM。整个过程发生在单个渲染帧内，浏览器直接将其渲染为最终状态（transform: scale(10); opacity: 0），中间无变化过程，因此 transition 完全失效。

✅ 正确做法：分离 DOM 插入与样式变更

需确保元素先以基础样式（.point）挂载到 DOM，再在下一帧触发状态变更。推荐使用 requestAnimationFrame() —— 它精准调度至浏览器下一次重绘前，既高效又兼容性好：

const button = document.querySelector('.button');

const handleClick = (e) => {
  const newClick = document.createElement('div');
  newClick.classList.add('point');

  // 使用 offsetXY 获取相对于按钮左上角的点击坐标
  newClick.style.top = `${e.offsetY}px`;
  newClick.style.left = `${e.offsetX}px`;

  button.appendChild(newClick);

  // 关键：延迟添加 .active 类，触发 transition
  requestAnimationFrame(() => {
    newClick.classList.add('active');
  });

  // 动画结束后自动清理 DOM，避免内存泄漏
  setTimeout(() => newClick.remove(), 500); // 与 transition 时间一致
};

button.addEventListener('click', handleClick);

对应 CSS 需补充关键防护措施：

.point {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 1;
  transform: scale(0); /* 初始缩放为 0，更符合“从点击点扩散”的直觉 */
  transition: transform 0.5s ease, opacity 0.5s ease;
  pointer-events: none; /* 防止新 div 拦截后续点击事件 */
}

.active {
  transform: scale(12); /* 适当放大，覆盖按钮区域 */
  opacity: 0;
}

⚠️ 注意事项：

js+css3提交按钮点击动画特效
js+css3提交按钮点击动画特效

下载

pointer-events: none 是必需项，否则快速连续点击时，新生成的 .point 元素可能遮挡按钮，导致 e.offsetX/Y 返回 0（即定位到左上角）；

setTimeout 的延迟时间应 ≥ transition 持续时间（此处 500ms），否则元素提前移除会导致动画中断；

推荐将 transform: scale(0) 设为初始值，而非 scale(1)，使涟漪真正“从点击点萌发”。

? 进阶方案：使用 Web Animations API（更可控、更现代）

若需更高精度控制（如取消动画、链式动画、时间轴管理），推荐使用原生 Element.animate()：

const handleClick = (e) => {
  const newClick = document.createElement('div');
  newClick.classList.add('point');
  newClick.style.top = `${e.offsetY}px`;
  newClick.style.left = `${e.offsetX}px`;
  button.appendChild(newClick);

  const animation = newClick.animate(
    [
      { opacity: 1, transform: 'scale(0)' },
      { opacity: 0, transform: 'scale(12)' }
    ],
    { duration: 500, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' }
  );

  animation.onfinish = () => newClick.remove();
};

此时 CSS 中 .point 只需定义基础定位与外观，无需声明 transition 或 .active 类：

.point {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #fff;
  pointer-events: none;
}

Web Animations API 的优势在于：动画独立于 CSS 类状态，支持暂停/回放/取消，且 onfinish 回调比 setTimeout 更可靠（不受 JS 主线程阻塞影响）。

✅ 总结

实现可靠水波纹效果的关键三步：

分帧操作：先挂载元素（含基础样式），再用 requestAnimationFrame 触发状态变更；
防干扰设计：为 ripple 元素设置 pointer-events: none，并及时 remove() 清理；
按需选型：简单场景用 transition + class；复杂交互动效优先 Element.animate()。

最终效果：每次点击，白色圆点精准出现在指尖位置，并以柔和缓动向外扩散、淡出，带来专业级的交互体验。