Angular10 Animation animate() Function

Last Updated : 06 Jan, 2023

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

Angular10 Animation animate() Function

taran910

Improve

Article Tags :

Angular10 Animation animate() Function

Similar Reads

Thank You!

What kind of Experience do you want to share?