Angular10 Animation animate() Function

In this article, we are going to see what is animate in Angular 10 and how to use it.

The animate in Angular10 is used to define an animation step that combines styling information with timing information

Syntax:

animate(timings | styles)

NgModule: Module used by animate is:

• animations

Approach: 

• Create the angular app to be used
• In app.module.ts import BrowserAnimationsModule
• In app.component.html make a div which will contain the animation element.
• In app.component.ts import the trigger, state, style, transition, animate to be used.
• Make the animation using animation() containing timing and styles.
• Serve the angular app using ng serve to see the output

Parameters:

• timing: Sets AnimateTimings for the parent animation
• styles: Sets AnimationStyles for the parent animation

Return Value:

• AnimationAnimateMetadata: An object that encapsulates the animation step

Example 1:

app.module.ts

import { LOCALE_ID, NgModule }
       from '@angular/core';
import { BrowserModule }
       from '@angular/platform-browser';
import {BrowserAnimationsModule}
       from '@angular/platform-browser/animations';
import { AppRoutingModule }
       from './app-routing.module';
import { AppComponent }
       from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [
      { provide: LOCALE_ID, useValue: 'en-GB' },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('gfg',[
      state('normal', style({
        'background-color': 'red',
        transform: 'translateX(0)'
      })),
      state('highlighted', style({
        'background-color': 'blue',
        transform: 'translateX(0)'
      })),
      transition('normal => highlighted',animate(1200)),
      transition('highlighted => normal',animate(1000))
    ])
  ]
})
export class AppComponent  {
  state = 'normal';
  anim(){
    this.state == 'normal' ?
    this.state = 'highlighted' : this.state = 'normal';
  }
}

app.component.html

<h1>GeeksforGeeks</h1>
<button (click)='anim()'>Animate</button>
<div
  style="width: 100px; height: 100px"
  [@gfg]='state'>
</div>

Output:

Reference: https://angular.io/api/animations/animate