Skip to content
Related Articles

Related Articles

Improve Article

Angular10 animation transition API

  • Last Updated : 02 Jun, 2021

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

The transition in Angular10 is used to create a transition for the animation in which an element will go from one state to another.

Syntax:

transition (stateChangeExpr, steps, options)

NgModule: Module used by transition 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 transition containing stateChangeExpr, steps, options for the animation.
  • Serve the angular app using ng serve to see the output.

Parameters:

  • stateChangeExpr: a boolean expression that compares the previous and current animation states.
  • steps: One or more animation objects returned by animation.
  • options: An options object that can contain a delay value for the start of the animation

Return Value:

  • AnimationTrasitionMetadata: An object that encapsulates the new transition data.

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 { 
  // Transition is imported here
  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('geek',[     
      state('clr', style({
        'background-color': '#ff0000',
        transform: 'translateX(0)'
      })),
      state('clr1', style({
        'background-color': '#000000',
        transform: 'translateX(100px) translateY(100px) scale(0.3)'
      })),
  
      // transition is used here 
      transition('clr => clr1',animate(1600)),
      transition('clr1 => clr',animate(100))
    ])
  ]
})
export class AppComponent  {
  state = 'clr';
  anim(){
    this.state == 'clr' ? this.state = 'clr1' : this.state = 'clr';
  }
}

app.component.html




<h1>GeeksforGeeks</h1>
<button (click)='anim()'>Animate</button>
<br>
<br>
<div 
  style="width: 150px; height: 100px; 
         border-radius: 5px;"
  [@geek]='state'>
</div>

Output:

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :