workspace/.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224154220.ts

import { Component, OnInit } from '@angular/core';
import { IonButton, IonIcon, IonItem, IonList, 
  IonListHeader,IonCardHeader,IonCardTitle,IonAvatar,IonCardContent,IonCard,IonInput,IonSearchbar } from '@ionic/angular/standalone';
  import { Router } from '@angular/router';

@Component({
  selector: 'app-drift-bottle',
  templateUrl: './drift-bottle.component.html',
  styleUrls: ['./drift-bottle.component.scss'],
  standalone: true,
  imports: [
        IonList,IonListHeader,IonItem,IonCardTitle,
        IonIcon,IonButton,IonCardContent,IonAvatar,
        IonInput,IonSearchbar,IonCard,IonCardHeader
        
      ]
})
export class DriftBottleComponent  implements OnInit {

  constructor(private router: Router) { }

  goTab1(){
    this.router.navigate(['tabs/tab1']);
   }
  ngOnInit() {}
  addRipple(event: MouseEvent) {
    const container = event.currentTarget as HTMLElement;
    const rect = container.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    // 创建涟漪元素
    const ripple = document.createElement('span');
    ripple.classList.add('ripple');

    // 设置涟漪的位置和大小
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;
    ripple.style.width = ripple.style.height = '100px'; // 可根据需要调整

    // 添加到DOM并触发动画
    container.appendChild(ripple);

    // 动画结束后移除涟漪元素
    setTimeout(() => {
      ripple.remove();
    }, 600); // 应与CSS动画时间相匹配
  }
}