状态变化使角度子元素动画捕捉起来

Question

我有一个父元素和子元素，每个元素都有单独的动画。动画共享一个状态变量（因此它们同时执行动画）。如果状态在动画完成之前发生更改，则子元素将捕捉为其定义的状态样式，而不是暂停/反转动画。父级动画按预期工作。

如何使子元素平稳地暂停/反转而又不迅速改变状态？

StackBlitz：

https://stackblitz.com/edit/angular-child-animation-snap-issue

动画触发器和标记：

trigger( 'childAnimation', [
  state( 'yes', style( {
    transform: 'scale( 2 ) translate3d( 0, 0, 0 )',
  } ) ),
  transition( '* => *', animate( '3s ease' ) ),
] ),

trigger( 'parentAnimation', [
  state( 'yes', style( {
    transform: 'translateY( 50% ) translateZ( 0 )',
  } ) ),
  transition( '* => *', [
    group( [
      query( '@*', animateChild() ),
      animate( '2s ease' ),
    ] ),
  ] ),
] ),

<div id="parent" [@parentAnimation]="animateStuff">
  <div id="child" [@childAnimation]="animateStuff">Child</div>
</div>