angular - Angular2 カスケード アニメーション

Question

要素のリストにカスケード アニメーションを実装しようとしています。

ドキュメントのおかげで、状態トリガーを正常に適用しましたが、すべての要素の状態が同時に適用され、カスケードされません。

私のアニメーション:

期待される結果：

ヒーロー.コンポーネント.ts

trigger('flyInOut', [
  state('in', style({
    transform: 'translateX(0)'
  })),
  transition('void => in', [
    style({transform: 'translateX(-100px)'}),
    animate(500)
  ]),
  transition('* => void', [
    style({transform: 'translateX(0)'}),
    animate(500)
  ])
])

ヒーロー.コンポーネント.html

<li *ngFor="let hero of heroes" 
    (click)="onSelect(hero)"
    [class.selected]="hero === selectedHero"
    @heroState="hero === selectedHero ? 'active' : 'inactive'"
    @flyInOut="'in'"
    >
  <span class="badge">{{hero.id}}</span> {{hero.name}}
  <button class="delete" (click)="delete(hero); $event.stopPropagation()">
    x
  </button>
</li>