Angular学习笔记36：Angular动画(4)!在动画中增加回调事件函数

在动画中增加回调事件函数

在动画启动和终止的时候，trigger()函数会有一些回调函数，在模版文件中，动画事件都是可以通过$event来传递。 比如在模版中有一个trigger()为open，此时，常用的回调就可以使用：@open.start 和 @open.done。

拿之前的飞入飞出动画来实验： 在模版文件中，增加一个start的回调：

<nz-form-control nzSpan="10" nzOffset="7" [@.disabled]="isDisabled">
    <div style="text-align: center" *ngIf="isInOut"
         [@fly]="isInOut?'flyIn':'void'" (@fly.start)="handleFlyStart($event)">
      <span>飞入飞出动画～</span>
    </div>
  </nz-form-control>

这时候，增加了一个关于fly的start的回调，再修改类文件：

public handleFlyStart(event: AnimationEvent) {
    console.log(event);
  }

然后保存，在控制台就可以看到了关于fly这个trriger 的相关信息了；

这只是一个最简单的例子，在实际项目中，可以在这种回调中发起http 请求，尤其是对于一些速度较慢的请求，这是一种比较简单，经济的不久措施。这样可以适当提高用户体验的方法。