title: Angular ngIf causes height CSS transition when toggling between two child components
body: <p>I have a "button" component in Angular, with has a <code>loading</code> input. If the value is <code>false</code> it displays the text of the button, as displayed via content projection (<code>&lt;ng-content&gt;</code>). If <code>true</code>, it hides the content and displays a "spinner" component instead.</p>
  
  <p>This done in the template using an <code>*ngIf</code>:</p>
  
  <pre><code>&lt;button class="btn"
    [ngClass]="{'loading': loading}"&gt;
    &lt;ng-content *ngIf="!loading"&gt;&lt;/ng-content&gt;
    &lt;app-spinner *ngIf="loading"&gt;&lt;/app-spinner&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>This works fine for toggling between the two views; if the Input on the button changes, the template renders it correctly.</p>
  
  <p>However, when the input changes and the spinner is displayed, it causes a strange animation on the height of the button. </p>
  
  <p>This happens when the button CSS has <code>transition: all 0.25s ease-out;</code>. If I comment that out, it's fine. But I want to keep the transition property if possible.</p>
  
  <p>I've created a Stackblitz to demonstrate it: 
  <a href="https://stackblitz.com/edit/angular-ngif-in-button-strange-animation" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ngif-in-button-strange-animation</a></p>
  
  <p>I am wondering if it's because for split second, both components are in displayed while Angular's change detection is working, but I'm not sure.</p>