angular-animations

Angular-Animations

Angular Animations utility library for Angular 4.2+ It is based on animate.css, but can be used in a declarative manner with an angular app

Prerequisites

Make sure you import BrowserAnimationModule in your angular app.

 npm i @angular/animations@latest --save

Import BrowserAnimationsModule from @angular/platform-browser/animations in your root NgModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    BrowserAnimationsModule
  ],
})
export class AppModule { }

Installation and Usage

 npm i angular-animations --save

Animations on enter / on leave

Animations on enter / on leave are triggered in a moment when element is added to or removed from the dom. Basic example would be with using *ngIf template directive.

Import animation functions that you want to use and add them to the component animations declaration:

import { fadeInOnEnterAnimation, fadeOutOnLeaveAnimation } from 'angular-animations';

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  animations: [
    fadeInOnEnterAnimation(),
    fadeOutOnLeaveAnimation()
  ]
})

and use them in the template:

<div  *ngIf="CONDITION"  [@fadeInOnEnter] [@fadeOutOnLeave]></div>

Running Demo App

npm start

Authors

• Chris Filipowski - filipows

License

This project is licensed under the MIT License - see the LICENSE file for details