Animations on children do not work: leave if the host component is changed to * ngIf = "false"

Question

I am trying to create an input / release animation for a slide menu. The menu opens with * ngIf (because I need ngOnInt)

Outwardly:

<app-slide-menu *ngIf="isOpen"></app-slide-menu> 

inside

 <div class="dark-overlay" [@fadeinout] ></div> <nav class="menu" [@slideinout] > <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> </nav> 

When isOpen changes externally, the :enter animations for the children of the app-slide-menu work, however the :leave animation :leave not used when isOpen = false .

It seems that the *ngIf parent is not delayed for child animations / they don’t even know that they are dying.

Should I do something like passing in isOpen: boolean via @Input() and apply it to child elements?

Perhaps even add animations to HostBinding that does nothing but delay *ngIf ?

Answer 1

Hi, I am doing a small example:

https://embed.plnkr.co/RDL4yuex2Q7gGbHlcLsQ/

The definition of the transition to display:

 transition('void => *', [... 

And the transition definition for hide:

 transition('* => void', [... 

'void' : this state is reserved by Angular. The void state element means that the element is no longer part of the application. An example of a void state is that when the ngIf value is false and this element is no longer in the DOM.

'*' : This is the default state. This is a state that was not declared in the trigger function. * state is used to dynamically start and end a state in an animation.

Answer 2

this comment from Matsko worked for me.

Here is its essence:

Angular 4 introduced several new animation features. Those that help you do this: leave the animated work on the child elements of query and animateChild .

Here is an example of Matsko:

 @Component({ selector: 'my-app', template: ` <div> <h2>Hello {{name}}</h2> <button (click)="toggle()">Toggle</button> <div *ngIf="show" @ngIfAnimation> <h3 @easeInOut>I'm inside ngIf</h3> </div> </div> `, animations: [ trigger('ngIfAnimation', [ transition(':enter, :leave', [ query('@*', animateChild()) ]) ]) //... ] }) class App {...}