Make parent animation wait for Child animation to finish in Angular

Question

I have a full screen navigation that takes over the screen. The contents of the menu (child) I'd like to appear after the overlay (parent) has entered. This I have gotten to work. However, the leave transition is the issue.

I can't get the child to fade or even disappear entirely before the parent animates. Instead, the parent animates out first, although I can't confirm that the child animation is even running.

The start of the exit animation sets the width and height of the parent to 300% of the view. This is necessary for the effect that product team is asking for.

HTML:

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

Component TS (animations only):

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

score 2 · Answer 1 · answered Jul 24 '18 at 15:45

So I figured this one out. The trick is to use the group() function inside of sequence() inside of transition(). Here's my solution below (the first trigger function removed the :leave transition selector, and in the :leave transition in fullscreenNav, i added the group and sequence function to initiate the child animation):

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

]

Make parent animation wait for Child animation to finish in Angular

1 Answers1