Skip to content
Related Articles
Open in App
Not now

Related Articles

Angular10 animation transition API

Improve Article
Save Article
  • Last Updated : 02 Jun, 2021
Improve Article
Save Article

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
Related Articles

Start Your Coding Journey Now!