@ng-tool-kit/if-animate v0.0.6

IfAnimateDirective

Directive for showing and hiding elements with an enter and exit animation. The element will wait to be removed from the view container until the exit animation is complete.

Attributes

Outputs

Example

  @Component({
    template: `
      <button (click)="onClick()">Toggle</button>

      <p *ngtIfAnimate="display">Hello World</p>
    `,
    styles: [
      `
        @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

        @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }

        .entering {
          animation: fadeIn .4s;
        }

        .exiting {
          animation: fadeOut .4s;
        }
      `
    ]
  })
  class AnimationComponent {
    display = true;

    onClick() {
      this.display = !this.display;
    }
  }