Angular 2/4 Animations and Examples [What Is an Animation?]

What Is an Animation?

Animation is the process of making an important design feature of modern web applications and using animations, we are well design UI interface as per our needed. In Angular, we are using pure CSS to create animations stuff with good performance.

Stayed Informed – Angular 4 Q/A and Angular 2 Q/A

Installing Angular Animations -

> npm install @angular/animations@latest --save

Import browser Animations in the NgModule -

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

Before you can add animations, you need to import a few animation-specific imports and functions -

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

Add BrowserAnimationsModule in the imports array @NgModule decorator  -

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    ..
  ],
  ....
});

Import animations like trigger, state, style, transition, animate in the Component Class - 

import { trigger,state,style,transition,animate} from '@angular/animations';

Example As -

import { trigger,state,style,transition,animate } from '@angular/animations';

@Component({
    selector: 'app-root',
    template: '<div class="info" *ngFor="let user of users | async" [@slideInOut]="state" (click)="toggleState()"> <a>{{user.fname}} {{user.lname}}</a></div>',
    styleUrls: ['./user.component.css'],
    animations: [
      trigger('slideInOut', [
          state('slideIn', style({backgroundColor: '#F9F9F9', transform: 'scale(1)'})),
          state('slideOut', style({backgroundColor: '#F0B364', transform: 'scale(1.5)'})),
          transition('slideIn => slideOut', animate('100ms ease-in')),
          transition('slideOut => slideIn', animate('100ms ease-out'))]
      )]
});

export class UserComponent {
    state:string = 'slideIn';
 
    toggleState() {
        //This statement is used to toggles the user.
        this.state = this.state === 'slideIn' ? 'slideIn' : 'slideOut';
    };
}

Reference -

https://angular.io/guide/animations

I hope you are enjoying with this post! Please share with you friends. Thank you!!