Angular10 animation transition API

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