Angular Animations 

  • By Shubham Baghel
  • July 5, 2021
  • Angular

Animations used to add interaction between the html elements. Animation is available in Angular. After Angular 6 version, animation is no more a part of the @angular/core library, it is now a separate  library that needs to be imported in app.module.ts

To start with angular animation, we need to import the library as follows − 

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’; The BrowserAnimationsModule needs to be import array in app.module.ts as shown below − 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

app.module.ts 

import { BrowserModule } from ‘@angular/platform-browser’; 

import { NgModule } from ‘@angular/core’; 

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’; import { AppComponent } from ‘./app.component’; 

@NgModule({ 

 declarations: [ 

 AppComponent 

 ], 

 imports: [ 

 BrowserModule, 

 BrowserAnimationsModule 

 ], 

 providers: [], 

 bootstrap: [AppComponent] 

}) 

export class AppModule { } 

app.component.html 

 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 

In app.component.html, we have added the html elements, which are to be animated. 

<div class=”room” [@lightOnOff]=”roomState”></div> 

<button type=”button” (click)=”toggleLights()”>Animation</button> 

Here we have added a button and a div with an class room. There is a click event on which the  toggleLights function is called. And for the div, the @lightOnOff directive is added and given the  value as roomState.

app.component.ts 

Let us now see the app.component.ts where the animation is defined. 

import { Component } from ‘@angular/core’; 

import { trigger, state, style, transition, animate } from ‘@angular/animations’; @Component({ 

 selector: ‘app-root’, 

 templateUrl: ‘./app.component.html’, 

 styleUrls: [‘./app.component.css’], 

 styles:[` 

 .room{ 

 background-color: black; 

 color:white; 

 width:200px; 

 height:200px; 

 border:1px solid black; 

 position:relative; 

} 

 `], 

 animations: [ 

 trigger(‘lightOnOff’,[ 

 state(‘off’,style({ 

 background:’black’, 

 borderRadius:’20px’ 

 })), 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 

 background:’white’, 

 width:’50px’, 

 height:’50px’, 

 borderRadius:’50%’ 

 })), 

 transition(‘off=>on’,[animate(‘2s’,style({ 

 background:’white’, 

 transform:’rotate(45deg)’, 

 width:’50px’, 

 height:’50px’, 

 borderRadius:’50%’ 

 }))]), 

 transition(‘on=>off’,[animate(‘2s’,style({ 

 background:’black’, 

 width:’200px’, 

 height:’200px’, 

 borderRadius:’20px’ 

 }))]) 

 ]) 

 ] 

})

export class AppComponent { 

 roomState:string=”off”; 

 toggleLights(){ 

 this.roomState=(this.roomState==”off”)?’on’:’off’; 

 } 

} 

We have to import the animation library that is to be used in the .ts file as shown above. import { trigger, state, style, transition, animate } from ‘@angular/animations’; 

In above example we have imported trigger, state, style, transition, and animate from  @angular/animations and used in animations array property of @Component () decorator − 

animations: [ 

 trigger(‘lightOnOff’,[ 

 state(‘off’,style({ 

 background:’black’, 

 borderRadius:’20px’ 

 })), 

 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 state(‘on’,style({ 

 background:’white’, 

 width:’50px’, 

 height:’50px’, 

 borderRadius:’50%’ 

 })), 

 transition(‘off=>on’,[animate(‘2s’,style({ 

 background:’white’, 

 transform:’rotate(45deg)’, 

 width:’50px’, 

 height:’50px’, 

 borderRadius:’50%’ 

 }))]), 

 transition(‘on=>off’,[animate(‘2s’,style({ 

 background:’black’, 

 width:’200px’, 

 height:’200px’, 

 borderRadius:’20px’ 

 }))]) 

 ]) 

]

Angular Animations start is defined by Trigger. The first parameter of Trigger is the name of the  animation to be given to the Html tag. Animation is applied to Html tag by this trigger. The second  parameters are the state, transition etc. that we have imported in animations. 

The state function defines the animations state. Transition applied between these states to the Html  element. Curently, we have defined two states, off and on. For off state, we have given the style 

 transform:’rotate(45deg)’, 

 width:’50px’, 

 height:’50px’, 

 borderRadius:’50%’ 

In states, first paramerter define start or end state, the second parameter accepts the style function  where we are giving style to particular state.  

Transition function adds animation/transition to the Html element. Frist prarameter in transition is  transition from one state to another state using arrow notation(=>), e.g. ‘off=>on’. 

Second parameter of tranition function is animate function that allows you to define the duration, delay, and transition timing function. 

Let us look at .html file to see how the transition function works 

<div class=”room” [@lightOnOff]=”roomState”> 

</div> 

<button type=”button” (click)=”toggleLights()”>Animation</button> 

There is a styles property added in the @component directive, where added css for dark room. Let  see below styles − 

styles:[` 

 .room{ 

 background-color: black; 

 color:white; 

 width:200px; 

 height:200px; 

 border:1px solid black; 

 position:relative; 

} 

`], 

In above styles, special character [“] is used to add styles to the Html element. Above class name  added to one div and given the animation trigger name in app.component.html file as shown below :

<div class=”room” [@lightOnOff]=”roomState”> 

</div> 

 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 

On click of a button it calls the toggleLights function, which is defined in the app.component.ts file as  shown below: 

 roomState:string=”off”; 

 toggleLights(){ 

 this.roomState=(this.roomState==”off”)?’on’:’off’; 

 } 

Default value given to the state variable is ‘off’. The toggleLights function changes the state on click. If  the state is ‘on’, it will change to ‘off’; and if ‘off’, it will change to ‘on’. 

When state changes from ‘off’ to ‘on’, style changes background-color from black to white, also  changes height, width, border-radius & applied rotate 45deg transform property. At the time of state  changes from ‘on’ to ‘off’, style changes background-color from white to black with transition/  animation effect.

Author- Shaikh Nahid
| SevenMentor Pvt Ltd.

Call the Trainer and Book your free demo Class for JAVA now!!!

© Copyright 2021 | Sevenmentor Pvt Ltd.

 

Submit Comment

Your email address will not be published. Required fields are marked *

*
*