Ngx Animations

Some angular animations to save your development time

• Expand-collapse
• fade
• shake
• slide
• zoom

Demo

Installation

Use your favorite node package management

npm i --save @ambroisebazie/ngx-animations 

OR

yarn add @ambroisebazie/ngx-animations

List of animations triggers defined

Expand Collapse triggers

• expandCollapse

Fade animation triggers

• fadeIn
• fadeInTop
• fadeInBottom
• fadeInLeft
• fadeInRight
• fadeOut
• fadeOutTop
• fadeOutBottom
• fadeOutLeft
• fadeOutRight

Shake

• shake

Slide

• slideInTop
• slideInBottom
• slideInLeft
• slideInRight
• slideOutTop
• slideOutBottom
• slideOutLeft
• slideOutRight

Zoom

• zoomIn
• zoomOut

Usage

Inside app.component.ts

import {NgxAnimations} from '@ambroisebazie/ngx-animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [NgxAnimations]
})
export class AppComponent implements OnInit {

  showText = false;

  constructor () {}


  ngOnInit () {
    // Example how to trigger animations
    setTimeout(() => this.showText = true, 2000)
  }

}

Inside your html file app.component.html

<div *ngIf="showText" [@fadeIn]="showText">
  Hello world
</div>

Thank You !