NGXA Library

npm i ngxa --save

import { roll } from 'ngxa';@Component({  animations: [    roll({direction:'In'}), // rollIn    roll({direction:'Out'}) // rollOut  ]})

import {animate, animation, AnimationTriggerMetadata, keyframes, style} from "@angular/animations";import {AnimationConfig} from "ngxa/common";import {buildTrigger} from "ngxa/base";const FadeKeyFrames: AnimationKeyframesSequenceMetadata = keyframes([  style({opacity: 0, offset: 0}),  style({opacity: 1, offset: 1}),]);const FadeAnimation: AnimationReferenceMetadata = animation( animate('{{timings}}', FadeKeyFrames));export const fade = (animationConfig?: Partial<AnimationConfig>): AnimationTriggerMetadata => {  return buildTrigger({    triggerName: (animationConfig && animationConfig.triggerName) || 'fade',    transitions: {      animationReferenceMetadata: FadeAnimation,      animationConfig,      animationOptions: {params: {timings: '500ms'}}    },    states: []  });};

import {fade} from "./path";@Component({  selector: 'app-header',  templateUrl: './header.component.html',  styleUrls: ['./header.component.scss'],  animations: [    // use fadeAnimation and overwrite optional configs    fade({timings:'0.3s', stateChangeExpressions: [':enter', '0 => 1'], triggerName: 'fadeAnimation'} )   ]})

<span [@fadeAnimation]="state">Fade Me</span>

<span [@fadeAnimation]="{value:state,params:{timings:'0.3s'}}">Fade Me</span>

export interface AnimationConfig{  triggerName: string;  stateChangeExpressions: string | string[];  delay: string;  timings: string | number;  nestedAnimations: NestedAnimationsType;}export interface TransitionConfig{  animationReferenceMetadata: AnimationReferenceMetadata;  animationConfig?: Partial<AnimationConfig>;  animationOptions?: AnimationOptions | null;}export interface BuildTriggerConfig{  triggerName: string;  transitions: TransitionConfig | TransitionConfig[];  states?: AnimationStateMetadata | AnimationStateMetadata[],}

import {AnimationConfig} from "./ngxa/common";interface RotateInConfig extends AnimationConfig{  degrees: number;  direction: RotateInAnimationDirection;}

import {bounce, flash, pulse, rubberBand, shake, headShake, swing, tada, wobble, jello, heartBeat,backIn, backOut, bounceIn, bounceOut, fadeIn, fadeOut, flip, flipIn, flipOut,lightspeedIn, lightspeedOut, rotateIn, rotateOut, hinge, jackInTheBox, roll, zoomIn, zoomOut, slideIn, slideOut} from "./ngxa";

import {zoomIn} from "./ngxa";@Component({  selector: 'app-header',  templateUrl: './header.component.html',  styleUrls: ['./header.component.scss'],  animations:[    zoomIn(),    zoomIn({direction: 'Up', stateChangeExpressions: ':enter, 0 => 1', translate: '200px'}),     zoomIn({direction: 'Down', stateChangeExpressions: [':enter','out => in'], translate: '500px'}),    zoomIn({direction: 'Left', translate: '300px', nestedAnimations:'parallel'}),    zoomIn({direction: 'Right', timings:'1s', triggerName:'customZoomInRight'}),  ]})

<div [@zoomIn]>  <span>ZoomIn Me</span></div><div [@zoomInUp]>  <span>ZoomInUp Me</span></div><div [@zoomInDown]>  <span>ZoomInDown Me</span></div><div [@zoomInLeft]>  <span>ZoomInLeft Me</span></div><div [@customZoomInRight]>  <span>ZoomInRight Me</span></div>

<div [@zoomInDown]="{value:state,params:{timings:'1s', delay:'0ms', translate:'2000px'}}">  <span>ZoomInDown Me</span></div><button mat-raised-button (click)="onAnimateIt()">Animate It</button>

state: string = 'out';onAnimateIt(): void{    this.state = 'out';    setTimeout(()=> {      this.state = 'in';    },1)}

import {bounceTransition, flashTransition, pulseTransition, rubberBandTransition, shakeTransition, headShakeTransition,swingTransition, tadaTransition, wobbleTransition, jelloTransition, heartBeatTransition,backInTransition, backOutTransition, bounceInTransition, bounceOutTransition,fadeInTransition, fadeOutTransition, flipInTransition, flipOutTransition, flipTransition,lightspeedInTransition, lightspeedOutTransition, rotateInTransition, rotateOutTransition,hingeTransition, jackInTheBoxTransition, rollTransition, zoomInTransition, zoomOutTransition,slideInTransition, slideOutTransition,} from "./ngxa";

export function attentionsAndBounceInStyles(config?: Partial<AnimationConfig>): AnimationTriggerMetadata {  return buildTrigger(    {      triggerName: (config && config.triggerName) || 'animations',      transitions: [        swingTransition({stateChangeExpressions: '* => swing'}),        bounceTransition({stateChangeExpressions: '* => bounce'}),        flashTransition({stateChangeExpressions: '* => flash'}),        headShakeTransition({stateChangeExpressions: '* => headShake'}),        heartBeatTransition({stateChangeExpressions: '* => heartBeat'}),        jelloTransition({stateChangeExpressions: '* => jello'}),        pulseTransition({stateChangeExpressions: '* => pulse'}),        rubberBandTransition({stateChangeExpressions: '* => rubberBand'}),        shakeTransition({stateChangeExpressions: '* => shake'}),        tadaTransition({stateChangeExpressions: '* => tada'}),        wobbleTransition({stateChangeExpressions: '* => wobble'}),        // bounce in transition on different directions        bounceInTransition({stateChangeExpressions: '* => bounceIn'}),        bounceInTransition({stateChangeExpressions: '* => bounceInUp', direction: 'Up'}),        bounceInTransition({stateChangeExpressions: '* => bounceInDown', direction: 'Down'}),        bounceInTransition({stateChangeExpressions: '* => bounceInLeft', direction: 'Left'}),        bounceInTransition({stateChangeExpressions: '* => bounceInRight', direction: 'Right'}),      ]    }  )}

import {swing, zoomIn, staggerNestedAnimations} from "./ngxa";@Component({  selector: 'app-description',  templateUrl: './description.component.html',  styleUrls: ['./description.component.scss'],  animations: [    zoomIn({stateChangeExpressions:':enter, 0 => 1', timings:'1s', direction: 'Down'}),    swing({stateChangeExpressions:':enter, 0 => 1'}),    staggerNestedAnimations({timings:'300ms', stateChangeExpressions:':enter, 0 => 1'})  ]})export class DescriptionComponent{  status: boolean = true;  onAnimateIt() {    this.status = false;    setTimeout(() => {      this.status = true;    }, 1);  }}

<div [@staggerNestedAnimations]="status">  <div [@zoomInDown]="status">    <span>Angular Animations Wrapper</span>  </div>  <div [@zoomInDown]="status">    <div [@swing]="{value:status, params:{timings:'1500ms'}}">      <span>Easy Builder, Dynamically, Reusable And Different Direction On Single Base Code</span>    </div>    <span>This wrapper helps you to implement animations easy in your angular application</span>  </div>  <button [@zoomInDown]="status" (click)="onAnimateIt()" >    Animate It  </button></div>