如何使用Angular在点击按钮时激活CSS动画？

<button (click)="activateAnimation()">点击激活动画</button>

@keyframes myAnimation {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  animations: [
    trigger('myAnimationTrigger', [
      state('inactive', style({
        backgroundColor: 'blue'
      })),
      state('active', style({
        backgroundColor: 'red',
        transform: 'scale(1.2)'
      })),
      transition('inactive => active', animate('500ms ease-in')),
      transition('active => inactive', animate('500ms ease-out'))
    ])
  ]
})
export class MyComponent {
  animationState = 'inactive';

  activateAnimation() {
    this.animationState = this.animationState === 'inactive' ? 'active' : 'inactive';
  }
}

<button (click)="activateAnimation()" [@myAnimationTrigger]="animationState">点击激活动画</button>