Animation in Angular 2
Posted By : Ankit Singh Rana | 02-Sep-2017
Angular 2 provides a group of great modules to show animations on your page. In this demo we'll show you a simple animation of moving a box div while changing its height and width in between.
Steps : 1
Import following modules in you component
import { Component, OnInit, trigger, state, style, transition, animate, group } from '@angular/core';
Step : 2
Add following code into @component decorative. Now in this divState will be actually div that will change when one state changes to another, we can also use void and wild card operators. '<=>' this symbol means that animation would trigger when either when normal state changes to highlight or highlight to normal. As shown below we can have animation inside animation as well.
animations : [
trigger('divState', [
state('normal', style({
'background-color': 'red',
'transform': 'translateX(0px)'
})),
state('highlight', style({ // If "highlight" name is not given the style will be applied to void state
'background-color': 'blue',
'transform': 'translateX(100px)'
})),
transition('normal <=> highlight', [
group([ // Syncronus animation
animate(500, style({ 'width': "500px" })), // Animations in between transation and will revert back
animate(500, style({ 'height': "500px" })),
animate(1000, style({
'border-radius': '50px'
}))
]),
animate(500) // actual transition animation
])
])
]
Step 3 :
Now add the following in your HTML. Its just a simple box shape div, which animate on click of animate button. Notice, we also defined divState which was shown earlier.
<input type="button" value="animate" (click)="animateDiv()" />
<div class="box" [@divState]="state" >{{innerText}}</div>
Last Step :-
Now for the last step we would need an animate funtion to call on the click of the button. So, add the following to in your component class. This function only toggle between the state which actually triggers the animation.
animateDiv(){
if(this.state == 'normal'){
this.state = 'highlight';
this.innerText = "Highlighted";
}else{
this.state = 'normal';
this.innerText = "normal";
}
}
The above code displays how basic animation works, feel free to add your own css and play with it.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Ankit Singh Rana
Ankit is a UI Developer having experience in Angular 2, Angular JS, JavaScript, HTML5 and CSS3. His hobbies includes playing video Games and traveling.