在使用angular的http调用期间动画按钮点击

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

getData() {
  // 在这里进行HTTP调用
}

getData() {
  this.http.get('https://api.example.com/data').subscribe(response => {
    // 处理返回的数据
  });
}

<button (click)="getData()" [@buttonAnimation]>点击获取数据</button>

@import '@angular/animations';

trigger('buttonAnimation', [
  state('inactive', style({
    transform: 'scale(1)'
  })),
  state('active', style({
    transform: 'scale(1.1)'
  })),
  transition('inactive => active', animate('100ms ease-in')),
  transition('active => inactive', animate('100ms ease-out'))
])

buttonState = 'inactive';

getData() {
  this.buttonState = 'active';
  this.http.get('https://api.example.com/data').subscribe(response => {
    // 处理返回的数据
    this.buttonState = 'inactive';
  });
}