title: Angular: ngif animation jumps! How to animate ngif element after previous element is removed from DOM?
body: <p>Chances are I am going about this all wrong but is there a way to delay <code>ngIf</code>? </p>
  
  <p>I have elements in a parent component, when the element is clicked it fades out and is removed from the DOM with <code>ngIf</code>, as that element is removed, elements from the child component are supposed to come in. </p>
  
  <p>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. </p>
  
  <p>Here is a gif to illustrate:</p>
  
  <p><a href="https://i.stack.imgur.com/LT5Yf.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LT5Yf.gif" alt="enter image description here"></a></p>
  
  <p>And here the html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="tours-thumbs" *ngIf="!isTourDetailsShown" [@toursThumbsInOut]&gt;
      &lt;div class="tour-container" (click)="showTourDetails($event)" *ngFor="let tour of tourThumbs"
          id="{{ tour.sys.id }}"&gt;
          &lt;figure class="tour-image"&gt;
              &lt;picture&gt;
                  &lt;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&gt;
                  &lt;figcaption&gt;&lt;span&gt;{{ tour.fields.tourTitle }}&lt;/span&gt;&lt;/figcaption&gt;
              &lt;/picture&gt;
          &lt;/figure&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;app-tour-info (sendBackToAllToursEvent)="getBackToAllTours($event)" [tourId]="tourId" *ngIf="isTourDetailsShown"&gt;
  &lt;/app-tour-info&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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? <a href="https://stackblitz.com/edit/angular-ivy-dvgqqe" rel="nofollow noreferrer">Here</a> is a Stackblitz.</p>