如何在Angular中动画响应式div？

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

@Component({
  selector: 'app-your-component',
  templateUrl: 'your-component.component.html',
  animations: [
    trigger('yourAnimationTrigger', [
      state('start', style({
        opacity: 1,
        transform: 'scale(1)'
      })),
      state('end', style({
        opacity: 0,
        transform: 'scale(0.5)'
      })),
      transition('start => end', animate('500ms')),
      transition('end => start', animate('500ms'))
    ])
  ]
})

<div [@yourAnimationTrigger]="divState"></div>

export class YourComponent {
  divState: string = 'start';

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