title: Angular5: Animation to exchange content of a div, animate height change of a container and fade out of the content. ("almost good" Plunker included)
body: <p>I am trying to implement an animation in Angular 5 to exchange the content of a container and animate the height to fit the new content. The stages of the animations would be (or just see in Plunker)
   1. Fade the current content out (opacity 1->0)
   2. Animate height of the container to fit the new content
   3. Fade the new content in (opacity 1->0)</p>
  
  <p>I have made some implementation, <strong>but there is a strange jumping of the height of the container div at the beginning and end of the animation.</strong></p>
  
  <p>What would be a better way to do this animation and prevent the jittering?</p>
  
  <p><a href="https://plnkr.co/edit/2TtKHfVkjDtITaAIM6bR?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/2TtKHfVkjDtITaAIM6bR?p=preview</a></p>
  
  <p>Background - in my application I have a flyout/dropdown/popup/modal container which has its height based on the content it holds, and the content changes when a user is logged-in/logged-out.</p>
  
  <p><strong>Edit:</strong>
  seems like the border is the culprit, I still would like to know what is the best practice for this kind of animations in angular (keyframes vs another method).</p>
  
  <p>code from plunker app.ts with Angular 5:</p>
  
  <pre><code>//our root app component
  import {Component, NgModule, VERSION} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import {
    trigger,
    state,
    style,
    transition,
    animate,
    keyframes,
    group
  } from '@angular/animations';
  
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div style="border: black solid 1px; padding: 10px"&gt;
      &lt;div [@list1]="!displayRed" style="border:blue solid 1px; background: lightblue"&gt;
            content 1 &lt;br/&gt;
            content 1 &lt;br/&gt;
            content 1 &lt;br/&gt; 
            content 1 &lt;br/&gt;
            content 1 &lt;br/&gt;
            content 1 &lt;br/&gt;
            content 1 &lt;br/&gt;
      &lt;/div&gt;
      &lt;div [@list1]="displayRed" style="border: red solid 1px; background: pink"&gt;
            content 2 &lt;br/&gt;
            content 2 &lt;br/&gt;
            content 2 &lt;br/&gt; 
            content 2 &lt;br/&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;br/&gt;
      &lt;button (click)="switchContent()"&gt; Switch Content &lt;/button&gt;
    `,
    animations:[    trigger('list1', [
        state('true', style({
          opacity: 1,
        })),
        state('false', style({
          opacity: 0,
          height:0,
          display:'none'
        })),
        transition('false =&gt; true', [
          style({
            opacity: 0,
            height:0
          }),
          animate(2000, keyframes([
            style({ opacity: 0, height:0,  offset: 0 }),
            style({ opacity: 0, height:0,  offset: 0.4 }),
            style({ opacity: 0, height:'*', offset: 0.6 }),
            style({ opacity: 1, height:'*', offset: 1 }),
          ])
          )
        ]),
        transition('true =&gt; false', [
          animate(2000, keyframes([
            style({ opacity: 1, height:'*', offset: 0 }),
            style({ opacity: 0, height:'*', offset: 0.4 }),
            style({ opacity: 0, height:0,  offset: 0.6 }),
            style({ opacity: 0, height:0,  offset: 1 }),
          ])
          )
        ])
      ])
      ]
  })
  export class App {
    name:string;
    displayRed:boolean=false;
  
    switchContent(){
      console.log('switch');
      this.displayRed=!this.displayRed;
    }
  
    constructor() {
      this.name = `Angular! v${VERSION.full}`
    }
  }
  
  @NgModule({
    imports: [ BrowserModule, BrowserAnimationsModule ],
    declarations: [ App ],
    bootstrap: [ App ]
  })
  export class AppModule {}
  </code></pre>