Angular 2 Animations

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 -

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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.