如何使用Anuglar 2动画实现翻转效果？

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

@Component({
  selector: 'app-flip-animation',
  templateUrl: './flip-animation.component.html',
  styleUrls: ['./flip-animation.component.css'],
  animations: [
    trigger('flip', [
      state('front', style({ transform: 'rotateY(0deg)' })),
      state('back', style({ transform: 'rotateY(180deg)' })),
      transition('front => back', animate('500ms ease-out')),
      transition('back => front', animate('500ms ease-in'))
    ])
  ]
})

<div [@flip]="flipState" (click)="flip()">
  <div class="front">Front</div>
  <div class="back">Back</div>
</div>

export class FlipAnimationComponent implements OnInit {
  flipState: string = 'front';

  flip() {
    this.flipState = this.flipState === 'front' ? 'back' : 'front';
  }
}