有没有办法通过@angular/animations通过离子特定的css属性进行动画处理？

npm install @angular/animations --save

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    // 其他模块...
  ],
  // 其他配置...
})
export class AppModule { }

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss'],
  animations: [
    trigger('buttonState', [
      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'))
    ])
  ]
})
export class MyComponent {
  buttonState = 'inactive';

  toggleButtonState() {
    this.buttonState = this.buttonState === 'inactive' ? 'active' : 'inactive';
  }
}

<button [@buttonState]="buttonState" (click)="toggleButtonState()">Click Me</button>