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, Angular 8 Classes in Pune 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, Angular 8 Training in Pune 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. Understand the Full concepts with Angular 8 Course in Pune.
Author- Shaikh Nahid
| SevenMentor Pvt Ltd.
Call the Trainer and Book your free demo Class for JAVA now!!!
© Copyright 2021 | Sevenmentor Pvt Ltd.