python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions