/ngx-animations

Primary LanguageTypeScriptMIT LicenseMIT

Codacy Badge Build Status codecov Known Vulnerabilities Dependencies License MIT

NgxAnimations

This is an adaptation of the Animate.css animations using the @angular/animations library.

You can find a demo here.

Installing and importing NgxAnimations

  1. Install ngx-animations :
npm install ngx-animations

Or

yarn add ngx-animations
  1. Import the BrowserAnimationsModule and NgxAnimationsModule in your module :
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxAnimationsModule } from 'ngx-animations';
...

@NgModule({
  imports:      [ BrowserAnimationsModule, NgxAnimationsModule ],
  ...
})

Using the AnimatedDirective to create animations on events with a minimum of code

<div (click)="myDiv.animate()">
  <div #myDiv="animated" [animAted]="{time: 800, animation: 'flip'}"></div>
</div>

Running example on stackblitz using @ngx-starter-kit/ngx-utils InViewportDirective

Using the AnimIfDirective to animate an element on init and before destroy

Use the *animIf directive to set the start and end animation :

<div
  *animIf="show; info: { startAnim: 'bounceIn', endAnim: 'bounceOut', time: 1000 }"
></div>

Add custom animations to the existing animations

Create an AnimationDefinition instance for every animation you want to add :

const animationDefinition = new AnimationDefinition({}, [
  { background: 'blue', width: '25%', offset: 0.25 },
  { background: 'green', width: '100%', offset: 0.5 },
  { background: 'yellow', width: '50%', offset: 0.75 },
  { background: 'black', width: '200px', offset: 1 }
]);

Inject the AnimationsService in your AppModule and use the addAnimations method to add your array of AnimationDefinitions:

constructor(private animationsService: AnimationsService) {
  this._animationsService.addAnimations([{ name: 'aCustomAnimation', animation: animationDefinition }]);
}

That's it, you are now ready to use your custom animation like other native animations.

You can find a running example for custom animations on stackblitz

Use the AnimationsService to create and use animations (you can use AnimatedDirective instead)

Then in your component :

Import the desired animation and the AnimationsService :

import { fadeIn, AnimationsService } from 'ngx-animations';

Get your element using the @ViewChild annotation :

@ViewChild('element') element: ElementRef;

Inject the AnimationsService :

constructor(private animationsService: AnimationsService) {}

After that you can create the player :

const player = this.animationsService.create(
  fadeIn(300),
  this.element.nativeElement
);

And play the animation :

player.play();

List of animations

bounce flash pulse rubberBand shake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flip flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight slideInUp slideInDown slideInLeft slideInRight slideOutUp slideOutDown slideOutLeft slideOutRight zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp hinge jackInTheBox rollIn rollOut