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

Question

我有一个占据屏幕的全屏导航。我希望在进入覆盖层（父级）后显示菜单（子级）的内容。这我已经开始工作了。然而，休假过渡是个问题。

我无法让孩子在父母动画之前消失甚至完全消失。相反，尽管我无法确认子动画是否正在运行，但父动画会先播放。

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

HTML：

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

组件 TS（仅限动画）：

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'
      })),
    ]),
   ]),

Answer 1

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

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
    }))
  ])
]),

]