Angular 使父动画等待子动画以角度方式完成

我有一个全屏导航，可以控制屏幕。我希望在覆盖（父）输入后显示的菜单（子）内容。这是我开始工作的原因。然而，休假过渡是一个问题

我不能让孩子在父母动画之前完全消失。取而代之的是，父动画首先被制作出来，尽管我无法确认子动画是否正在运行

退出动画的开始将父对象的宽度和高度设置为视图的300%。这对于产品团队所要求的效果是必要的

HTML:

---

所以我想出了这个。诀窍是在transition（）中的sequence（）内部使用group（）函数。下面是我的解决方案（第一个触发器函数删除了：leave transition选择器，在fullscreenNav中的：leave transition中，我添加了group和sequence函数来启动子动画）：

]

<div *ngIf="menuOpen" @fullscreenNav class="fullscreen-nav" >
    <div class="menu-content" @showHideOnLeave >
    </div>
</div>

animations: [
trigger('animateChildren', [
  transition(':enter, :leave', [
      query('@showHideOnLeave', animateChild())
  ])
]),
trigger('fullscreenNav', [
    transition(':enter', [
      style({
        height: '20vh',
        width: '50vw',
        borderRadius: '100%',
        borderTopRightRadius: '0',
        top: '-10vh',
        right: '-10vw'
      }),
      animate('400ms ease-in', style({
        height: '300%',
        width: '300%',
        borderRadius: '0',
        top: '0',
        right: '0'
      })),
    ]),
    transition(':leave', [
      style({
        height: '100%',
        width: '100%',
        borderRadius: '100%',
        borderTopRightRadius: '0',
        overflow: 'hidden',
        top: '0vh',
        right: '0vw'
      }),
      animate('500ms 100ms',  style({
        offset: 1,
        height: '15vh',
        width: '20vw',
        borderRadius: '100%',
        borderTopRightRadius: '0',
        top: '-10vh',
        right: '-10vw'
      })),
    ]),
   ]),

animations: [
trigger('animateChildren', [
  transition(':enter', [
      query('@showHideOnLeave', animateChild())
  ])
]),
trigger('fullscreenNav', [
  transition(':enter', [
    style({
      height: '20vh',
      width: '50vw',
      borderRadius: '100%',
      borderTopRightRadius: '0',
      top: '-10vh',
      right: '-10vw'
    }),
    animate('400ms ease-in', style({
      height: '300%',
      width: '300%',
      borderRadius: '0',
      top: '0',
      right: '0'
    })),
  ]),
  transition(':leave', [
    sequence([
      group([
        query('@showHideOnLeave', animateChild({ duration: '200ms' })),
      ]),
        style({
          height: '300%',
          width: '300%',
          borderRadius: '100%',
          borderTopRightRadius: '0',
          overflow: 'hidden',
          top: '0vh',
          right: '0vw'
        }),
          animate('300ms 100ms',  style({
            offset: 1,
            height: '15vh',
            width: '20vw',
            borderRadius: '100%',
            borderTopRightRadius: '0',
            top: '-10vh',
            right: '-10vw'
          })),
    ])
  ]),
]),
trigger('showHideOnLeave', [
  transition('void => *', [
    style({
      opacity: 0
    }),
    animate('200ms 400ms', style({
      opacity: 1
    }))
  ]),
  transition('* => void', [
    style({
      opacity: 1
    }),
    animate('100ms', style({
      opacity: 0
    }))
  ])
]),