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 >w3wiki</ 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