Open In App

Angular10 Animation animate() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 06 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads