Angular: ngif animation jumps! How to animate ngif element after previous element is removed from DOM?

Question

Chances are I am going about this all wrong but is there a way to delay ngIf?

I have elements in a parent component, when the element is clicked it fades out and is removed from the DOM with ngIf, as that element is removed, elements from the child component are supposed to come in.

The issue is (i think): there is an overlap when elements from the parent and elements from the child are added and removed resulting in a "jumping" into place of the element in the child component.

Here is a gif to illustrate:

And here the html:

<div class="tours-thumbs" *ngIf="!isTourDetailsShown" [@toursThumbsInOut]>
    <div class="tour-container" (click)="showTourDetails($event)" *ngFor="let tour of tourThumbs"
        id="{{ tour.sys.id }}">
        <figure class="tour-image">
            <picture>
                <img src="{{ tour.fields.tourCoverPhoto.fields.tourCoverPhoto.fields.file.url }}"
                    alt="{{ tour.fields.tourCoverPhoto.fields.tourCoverPhoto.fields.description }}"
                    title="{{ tour.fields.tourCoverPhoto.fields.tourCoverPhoto.fields.title }}"
                    [target]="tourBackgroundImg" dynamicBackgroundImg>
                <figcaption><span>{{ tour.fields.tourTitle }}</span></figcaption>
            </picture>
        </figure>
    </div>
</div>
<app-tour-info (sendBackToAllToursEvent)="getBackToAllTours($event)" [tourId]="tourId" *ngIf="isTourDetailsShown">
</app-tour-info>
</div>

As you can see the red button shows up in the left corner before the image thumnails are fully removed from the DOM, then the button jumps to the top, what am I missing? Here is a Stackblitz.

Answer 1

One possible solution for your problem is to use animation callback events in angular.
See official angular documentation here: AnimationEvent.
Stackblitz Sample: https://stackblitz.com/edit/angular-ivy-y5momt