角度父级动画会阻止子组件内部的动画

Question

我有一个带有动画的子组件

child.component.ts

@Component({
  selector: 'child',
  animations:[
    // child animations
   ]
})
export class ChildComponent { ... }

child.component.hmtl.ts

...
<div [@child]>
</div>
...

还有一个父组件，它也有动画

parent.component.ts

@Component({
  selector: 'parent',
  animations:[
    // parent animations
   ]
})
export class ParentComponent { ... }

parent.component.hmtl.ts

...
<div [@parent]>
  <child></child>
</div>
...

在此Stackblitz Example上，您可以看到父级动画内部的子级组件根本无法播放。

我的问题是：为什么子组件内部的动画根本无法播放，在父动画完成后如何延迟子动画触发？

编辑：一种可能的解决方案是将所有动画移至父组件，但我不喜欢这种解决方案，因为这会创建巨大的动画文件