Angular动画start/done事件未触发，求助代码问题排查

核心问题：事件绑定元素与动画触发器不匹配 #

你把(@stagger.start)和(@stagger.done)绑定在了<app-list-item>组件上，但动画触发器[@stagger]实际挂载在父级的<ol class="context">元素上。Angular的动画事件只会从直接绑定了触发器的元素派发，子组件不会自动继承或转发这些事件，所以回调自然不会触发。

解决方案1：监听父级元素的动画事件 #

如果只需要监听整个列表组的动画开始/结束，把事件绑定移到带有[@stagger]的<ol>元素上即可：

<ol class="flow">
    <li *ngFor="let context of data">
        <ol class="context" 
            [@stagger]
            (@stagger.start)="onAnimationStart(context)"
            (@stagger.done)="onAnimationDone(context)"
        >
            <li *ngFor="let item of context.items">
                <app-list-item [data]="item"></app-list-item>
            </li>
        </ol>
    </li>
</ol>

对应的组件回调函数可以接收当前列表组的上下文：

onAnimationStart(context: any) {
  console.log('列表组动画开始:', context);
}

onAnimationDone(context: any) {
  console.log('列表组动画结束:', context);
}

解决方案2：监听每个子项的动画事件 #

如果需要跟踪每个列表项的动画生命周期，需要给每个子元素单独绑定动画触发器：

调整组件动画代码

animations: [
  // 单个列表项的动画
  trigger('itemAnimation', [
    transition(':enter', [
      style({ opacity: 0 }),
      animate('500ms ease-out', style({ opacity: 1 }))
    ])
  ]),
  // 父级列表的交错控制
  trigger('listStagger', [
    transition(':enter', [
      query(':enter', [
        stagger('300ms', [animate('500ms ease-out', style({ opacity: 1 }))])
      ])
    ])
  ])
]

修改HTML结构

把触发器和事件绑定到<app-list-item>上：

<ol class="flow">
    <li *ngFor="let context of data">
        <ol class="context" [@listStagger]>
            <li *ngFor="let item of context.items">
                <app-list-item
                   [data]="item"
                   [@itemAnimation]
                   (@itemAnimation.start)="onItemAnimationStart(item)"
                   (@itemAnimation.done)="onItemAnimationDone(item)"
                ></app-list-item>
            </li>
        </ol>
    </li>
</ol>

这样每个列表项的动画开始/结束都会触发对应的回调，你可以在函数里处理单个item的逻辑：

onItemAnimationStart(item: any) {
  console.log('项动画开始:', item);
}

onItemAnimationDone(item: any) {
  console.log('项动画结束:', item);
}

额外说明 #

原动画中的query(':enter')是在父级<ol>进入时，查询其内部所有进入的子元素并执行交错动画，但这些动画的事件仍然属于父级触发器。只有当每个子元素拥有独立的动画触发器时，才能捕获到单个元素的动画生命周期事件。

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri