如何为Ionic的div元素添加点击指定半径的环形波纹效果？

原生<ion-ripple-effect>组件的波纹范围受限于宿主元素边界，无法直接实现以点击坐标为中心、指定半径扩散的波纹效果（参考需求效果：点击位置为圆心，向外扩散出可超出元素范围的圆形波纹），你可以通过自定义组件来实现该需求：

实现步骤 #

1. 创建自定义波纹组件 #

新建custom-ripple.component.ts文件，核心逻辑是监听点击事件获取坐标，动态生成波纹元素并控制动画：

import { Component, ElementRef, HostListener } from '@angular/core';

@Component({
  selector: 'app-custom-ripple',
  template: '<div class="ripple-container"></div>',
  styleUrls: ['./custom-ripple.component.scss']
})
export class CustomRippleComponent {
  constructor(private el: ElementRef) {}

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    const rippleContainer = this.el.nativeElement.querySelector('.ripple-container');
    const ripple = document.createElement('div');
    ripple.classList.add('ripple');

    // 计算点击位置相对于容器的坐标
    const rect = rippleContainer.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    // 设置波纹初始位置与自定义半径
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;
    ripple.style.setProperty('--ripple-radius', '200px');

    rippleContainer.appendChild(ripple);

    // 动画结束后清理波纹元素
    ripple.addEventListener('animationend', () => ripple.remove());
  }
}

2. 编写SCSS样式 #

在custom-ripple.component.scss中定义波纹的扩散动画：

.ripple-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible; /* 允许波纹超出容器范围 */
  pointer-events: none; /* 不干扰底层元素的点击事件 */
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  animation: ripple-expand 0.6s ease-out forwards;
  --ripple-radius: 150px; /* 默认半径，可通过JS动态修改 */
}

@keyframes ripple-expand {
  to {
    width: var(--ripple-radius);
    height: var(--ripple-radius);
    opacity: 0;
  }
}

3. 使用自定义组件 #

在目标页面中引入并使用该组件：

<app-custom-ripple style="width: 300px; height: 300px; background: #f5f5f5;">
  <!-- 内部可放置原有页面内容 -->
</app-custom-ripple>

关键说明 #

• 通过--ripple-radiusCSS变量可灵活调整波纹的最大扩散半径
• 容器设置overflow: visible确保波纹能突破元素边界扩散
• 点击坐标计算逻辑保证波纹以点击位置为中心展开

内容的提问来源于stack exchange，提问作者later