如何使用Angular动画让一个元素接一个元素地飞进飞出？

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

@Component({
  // ...
  animations: [
    trigger('flyInOut', [
      // ...
    ])
  ]
})

trigger('flyInOut', [
  state('void', style({ opacity: 0, transform: 'translateX(-100%)' })),
  state('in', style({ opacity: 1, transform: 'translateX(0)' })),
  // ...
])

trigger('flyInOut', [
  // ...
  transition('void => in', animate('500ms ease-in')),
  transition('in => void', animate('500ms ease-out'))
])

<div [@flyInOut]="动画状态"></div>

export class MyComponent implements OnInit {
  动画状态: string;

  ngOnInit() {
    this.动画状态 = 'in';
  }

  切换动画() {
    this.动画状态 = this.动画状态 === 'in' ? 'out' : 'in';
  }
}

<button (click)="切换动画()">切换动画</button>