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

【问题标题】：Make parent animation wait for Child animation to finish in Angular让父动画等待子动画在 Angular 中完成
【发布时间】：2019-01-01 06:23:58
【问题描述】：

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

我不能让孩子在父母动画之前消失甚至完全消失。相反，父动画首先出现，尽管我无法确认子动画是否正在运行。

退出动画的开始将父级的宽度和高度设置为视图的 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'
      })),
    ]),
   ]),

【问题讨论】：

标签： angular angular-animations

【解决方案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
    }))
  ])
]),

]

【讨论】：