手把手教你用 JavaScript 实现按钮的涟漪效果

2023-01-12 21:25:28

JavaScript 赋予按钮涟漪效果：从平淡到灵动

踏入现代网络体验的大门，网页和应用程序的设计已成为决定用户满意度的关键因素。华丽的视觉效果和流畅的交互交互作用，吸引用户的目光，营造令人沉醉的用户体验。涟漪效果，一种常见的交互式元素，赋予按钮或可点击元素独特的生命力，在用户触发点击动作时，周围涟漪状的波纹扩散开来。这种效果不仅赏心悦目，更能为用户提供明确的反馈，彰显他们的点击已得到响应。

涟漪效果的应用场景可谓包罗万象。在网页中，它可以为导航按钮、行动召唤按钮、表单提交按钮等增添一抹灵动。而在移动应用程序里，菜单按钮、返回按钮、关闭按钮等，都可以借助涟漪效果提升用户交互体验。总而言之，任何需要提供清晰点击反馈的元素，都可以通过涟漪效果锦上添花。

涟漪效果的实现：一步一步，轻松驾驭

踏上实现涟漪效果的征程，我们需要 JavaScript、原生 HTML 和 CSS 三位好伙伴联袂出击。首先，为按钮元素配备一个点击事件侦听器，当用户点击按钮时，它将激活一个 JavaScript 函数。

<button onclick="createRipple(event)">按钮</button>

在 JavaScript 函数中，我们将利用原生 HTML 元素创造一个涟漪元素。该涟漪元素是一个 div 元素，位置和尺寸与按钮元素如出一辙。赋予涟漪元素一个 CSS 类别，以便我们使用 CSS 精心修饰它的外观。

function createRipple(event) {
  const button = event.currentTarget;

  const ripple = document.createElement('div');
  ripple.classList.add('ripple');

  ripple.style.left = `${event.clientX - button.offsetLeft}px`;
  ripple.style.top = `${event.clientY - button.offsetTop}px`;

  button.appendChild(ripple);

  setTimeout(() => {
    ripple.remove();
  }, 500);
}

最后一步，我们需要 CSS 的魔力来美化涟漪元素。为涟漪元素添加过渡效果，使其能够平滑地扩展和消失。

.ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0;

  transition: opacity 0.5s ease-out;
}

.ripple.active {
  opacity: 1;
  transform: scale(2);
}