ngIf和儿童动画-Angular4

Question

I have the following template in Angular 4:

<button (click)="isVisible = !isVisible" >Toggle</button>

<div class="global-block" *ngIf="isVisible" >
    <div class="content" [@slideRightLeft]>
       ... some content here ...
    </div>
    <div class="overlay" [@fadeIn]></div>
</div>

I already created both slideRightLeft and fadeIn animation using trigger and transition.

The problem is that it works for the first toggle (when isVisible == true ), but not when I hide it (when isVisible == false , the .global-block is hidden instantly and children's animations aren't visible).

I really want to have 2 different animations for those children element, but I also need to toggle the .global-block

Is there a way to delay the ngIf ? or maybe my approach is not good?

Answer 1

Yea ngIf will nuke those from the DOM immediately, removing all descendants and their associated animations. You could make it so the button only changes the toggle after a certain time period, waiting for the animations to complete, or you can use another method of hiding (visibility + opacity) which won't remove them from the DOM.

You could probalby wrap it all into the animation states actually - may not even need to use ngIf. You can use a string to diffrentiate between any number of different animation states and style them accordingly. So you could have one state that was 'button just clicked', another one 'button clicked 1000ms ago', and another 'animations over' (don't use those strings literally... but you get what i mean). This would make the behavior much more predictable.