如何在Angular材质中创建基于主题的CSS动画

<!-- app.component.html -->
<mat-card [@cardAnimation]="animationState">
  <mat-card-header>
    <mat-card-title>
      Angular Material CSS Animation
    </mat-card-title>
  </mat-card-header>
  <mat-card-content>
    This is a sample animation using Angular Material.
  </mat-card-content>
</mat-card>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('cardAnimation', [
      state('start', style({
        transform: 'scale(1)',
        backgroundColor: 'white'
      })),
      state('end', style({
        transform: 'scale(1.2)',
        backgroundColor: 'lightblue'
      })),
      transition('start => end', [
        animate('1s')
      ]),
      transition('end => start', [
        animate('0.5s')
      ])
    ])
  ]
})
export class AppComponent {
  animationState: string = 'start';

  toggleAnimation() {
    this.animationState = this.animationState === 'start' ? 'end' : 'start';
  }
}

/* app.component.css */
::ng-deep .mat-card {
  background-color: var(--primary-color);
  color: var(--primary-text-color);
}

::ng-deep .mat-card-header {
  background-color: var(--accent-color);
  color: var(--accent-text-color);
}

::ng-deep .mat-card-content {
  background-color: var(--background-color);
  color: var(--text-color);
}