ciriousjoker/ngx-transition-content

Switch between content: Fade out, transition height, fade in.

NgxTransitionContent _(changelog)

Transition content: Fade out, transition dimensions, fade in.

It was built for dialog content where the dialog width stays the same for every page of content. Read the caveats before using it.

Transition

Fade out old content -> transition dimensions to fit the new content -> fade in new content

Demo

transition.mov

Usage:

<!--
  Update slot to the correct index to start the transition.
  Optional attributes:
    [durationFade]="300"
    [durationHeight]="300"
-->
<ngx-transition-content [slot]="0">
  <ng-template ngx-transition-content-page>
    <p>Content1</p>
    <p>Content1</p>
    <p>Content1</p>
  </ng-template>
  <ng-template ngx-transition-content-page>
    <p>Content2</p>
    <p>Content2</p>
    <p>Content2</p>
    <p>Content2</p>
    <p>Content2</p>
  </ng-template>
</ngx-transition-content>