如何跟踪所有应用动画在Angular中结束的时刻？

Question

我正在学习Angular，并且我有一个任务来创建连续三人游戏（看起来如图所示）。

找到所有出现的三元组，并且跌倒球的动画结束时，我需要检查是否形成了新的三元组。

因此，现在我有两种获取每个球的动画完成时刻的方法：通过超时和通过增量。两者都在每个球的（@ animation.start）和（@ animation.done）事件回调的帮助下工作。

现在是问题。

我想我的方法不是最佳做法，并且有一种方法可以跟踪所有应用动画是否结束。我正在使用Angular 6.0.3版。

我是Angular的新手，任何建议都会对您有所帮助。

谢谢！

Answer 1

是的，使用最新的角度版本（即6.x.x或更高版本），您现在可以在动画上使用回调。

您可以按照以下指定的方法在动画的触发器上使用start和done方法。

  <ul>
    <li *ngFor="let hero of heroes"
        (@flyInOut.start)="animationStarted($event)"
        (@flyInOut.done)="animationDone($event)"
        [@flyInOut]="'in'">
      {{hero.name}}
    </li>
  </ul>

了解更多jest-transform-graphql