使父动画在Angular中等待完成子动画

import { trigger, state, style, animate, transition, AnimationEvent } from '@angular/animations';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  animations: [
    trigger('parentAnimation', [
      transition(':enter', [
        animate('500ms', style({ opacity: 0 })),
      ]),
      transition(':leave', [
        animate('500ms', style({ opacity: 1 })),
      ]),
    ]),
    trigger('childAnimation', [
      transition(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('500ms', style({ transform: 'translateX(0)' })),
      ]),
      transition(':leave', [
        animate('500ms', style({ transform: 'translateX(-100%)' })),
      ]),
    ]),
  ],
})
export class ExampleComponent {
  parentAnimationDone = false;

  parentAnimationDoneCallback(event: AnimationEvent) {
    if (event.toState === 'void') {
      this.parentAnimationDone = true;
    }
  }
}

<div [@parentAnimation]="parentAnimationDone ? 'void' : ''" (@parentAnimation.done)="parentAnimationDoneCallback($event)">
  <div [@childAnimation]="parentAnimationDone ? 'void' : ''"></div>
</div>