Angular 中的动画回调

我们已经讨论了Angular，中的动画的基础知识，所以现在让我们来探索动画系统的另一个特性：动画回调。您可以使用Start和Done回调来设置在动画开始或结束时调用的钩子方法。

<$>[注]这篇文章讨论了角度2及以上的动画系统。<$>

让我们从这样的标记开始，其中我们的动画触发器称为itemAnim：

1<ul *ngIf="items">
2  <li *ngFor="let item of items"
3      (click)="removeItem(item)"
4      [@itemAnim]>{{ item }}</li>
5</ul>

我们可以使用以下语法添加回调：

1<ul *ngIf="items">
2  <li *ngFor="let item of items"
3      (click)="removeItem(item)"
4      [@itemAnim]
5      (@itemAnim.start)="animStart($event)"
6      (@itemAnim.done)="animEnd($event)">{{ item }}</li>
7</ul>

回调接收包含以下属性的动画过渡事件：FromState、phaseName()、toState和totalTime。

在组件中，我们现在可以定义回调方法：

 1// ...
 2
 3animStart(event) {
 4  console.log('Animation Started');
 5  // do more stuff
 6}
 7
 8animEnd(event) {
 9  console.log('Animation Ended');
10  // do more stuff
11}