Skip to content
Related Articles

Related Articles

Improve Article

Angular10 Animation animate() Function

  • Last Updated : 02 Jun, 2021

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :