I often hear from developers that animation is hard, especially when you are forced to implement it based on some business logic. But I must tell you when we about Angular2/4 Animation, its a piece of cake for Angular Developers. In this article, we will understand the working of Angular 2 Animation example and Angular means Angular version greater than 2.x unless stated otherwise.
Below is the list of list of example which we will implement in this article,
- Hide show with Animation.
- Animation with multiple CSS properties.
- Animation with multiple states
Before jumping onto these examples, let’s first understand the working of the Angular animation and how to enable them in the Angular project.
Demo:
- Hide and Show using Animations (FadeIn Fade out) Demo
- Animating (using multiple css changes) Demo
- Animation with multiple states Demo
1. Empowering Angular application with animation
To enable Angular animation our project first we need to import theBrowserAnimationsModule. By importing this module your application will become capable of performing all the animations for you.How and where would you do it?
Open the app.module.ts file and write the below code,
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 { }2. Working and the Syntax
Now we have enabled the Angular Animation, let’s understand the working of the Angular Animation.The below code is short and sweet and I believe it does not need any explanation.
/*
Angular 2 Animation example
@author Shashank Tiwari
*/
@Component({
selector: 'app-component',
template: `
<div>
click on below button => {{hideShowIndentifier}}
</div>
<hr>
<button (click)="hideShow()"></button>
`
})
export class MyComponent{
/*---------------------- Hide and Show starts --------------------*/ hideShowIndentifier:boolean = true;
hideShow(){
this.hideShowIndentifier = !this.hideShowIndentifier;
}
/*---------------------- Hide and Show ends ----------------------*/}Let’s add the Animation into above code. Starting from Markup, We will hide and show the above div, to apply animation on that div we will modify the above markup by markup shown below.
<div [@hideShow]="hideShowAnimator">
click on below button => {{hideShowIndentifier}}
</div>
<hr>
<button (click)="hideShow()"></button>Explanation:
In the above code, We have added @hideShow is the template property which is used to link the Markup to the Angular Component. And that’s it from MarkUP side.
Now, all we have to do is to work on component metadata, So for the animation, we will add the animations metadata as shown in below code. The animations metadata contains the trigger function which basically calls for thr animation.
/*
Angular 2 Animation example
@author Shashank Tiwari
*/
@Component({
selector: 'app-component',
template: `
<div [@hideShow]="hideShowAnimator">
click on below button => {{hideShowIndentifier}}
</div>
<hr>
<button (click)="hideShow()"></button>
`
animations: [
trigger('visibilityChanged', [
state('true' , style({ display: "block" })),
state('false', style({ display: "none" })),
transition('0 => 1', animate('.5s')),
transition('1 => 0', animate('.9s'))
])
]
})
export class MyComponent{
/*---------------------- Hide and Show starts --------------------*/ hideShowIndentifier:boolean = true;
hideShow(){
this.hideShowIndentifier = !this.hideShowIndentifier;
}
/*---------------------- Hide and Show ends ----------------------*/}Explanation:
1. The animations metadata as I told you before, contains the list of trigger functions.triggercreates an animation trigger when the expression bound to the trigger changes, Means when you will change the value ofhideShowIndentifier property your animation will occur on the target element.
2.triggerexpects two parameter first is state and the second one is array will contain the state() and the transitions and on the basis of the state, animation happens.
3. The state()is again an animation specific function, this function performs the animation from the when the given state is active in the component.
4. The transition(), will make sure that each animation should take specified time provide to it.In the above, We have added two transition function as show below,
transition('0 => 1', animate('.5s')) : This function will take 500 msec to perform the animation from the true to the false state.transition('1 => 0', animate('.9s')) : This function will take 500 msec to perform the animation from the false to the true state.
Or you want to keep the same timing for the both states you can write something like this,
transition('* => *', animate('.5s'))
This means all animations will take 500 msec to perform all the changes on the target element across all states. Now that we have understood the working and syntax of the Angular animation let’s create few examples for the same. Here we cover two more example as shown below.
- Animation with multiple CSS properties.
- Animation with multiple states.
3. Animation with multiple CSS properties
In this example, we will implement the animation using multiple CSS properties.
/*
* Angular 2 Animation example
* @author Shashank Tiwari
*/import {trigger,state,style,animate,transition,keyframes} from '@angular/animations';
@Component({
selector: 'my-app',
template: `
<div class="app-heading">
<h2 class="text-center span6"> Angular 2 Animation</h2>
</div>
<div>
<h3>Exmaple : Animating (using multiple css changes).</h3>
</div>
<!-- Angular 2 Animation example starts -->
<div class="section">
<div class="example" >
<button class="btn btn-info" (click)="animate()">
Click me!
</button>
<div class="hideShow text-center" [@animateVaribale]="animateVaribale">
Animating me !
</div>
</div>
</div>
<!-- Angular 2 Animation example ends -->
<br/>
<div class="resource-provider">Find more cool stuff at <a href="http://www.codershood.info/">www.codershood.info</a></div>
`,
styles:`
/* Styles go here */ .app-heading{
padding: 5%;
background-color: #eee;
text-align:center;
}
.example{
padding: 5%;
}
.section{
padding-bottom: 2.5%;
margin-bottom: 5%;
border: solid 0.5px #d2d2d2;
}
.hideShow{
padding: 5%;
background-color: #00ffbb;
margin-top: 1%;
}
.resource-provider{
text-align:center;
font-weight:800;
}`,
animations: [
trigger('animateVaribale', [
state('true' , style({ height:'100px' ,width: '700px'})),
state('false', style({ height:'300px' ,width: '350px'})),
transition('0 => 1', animate('.2s')),
transition('1 => 0', animate('.2s'))
])
]
})
export class App {
/*---------------------- Angular 2 Animation example starts --------------------*/ animateVaribale:boolean = true;
animate(){
this.animateVaribale = !this.animateVaribale;
}
/*---------------------- Angular 2 Animation example ends ----------------------*/}
Explanation:
If you notice, I have added two properties height and width. So when the animation occurs, the height and width both changes simultaneously and rest of this are self-explanatory.
4. Animation with multiple states
Till now we saw examples of only with two states. Now in this example, We will implement animation with multiple stats.Take look at below code,
/*
* Angular 2 Animation example
* @author Shashank Tiwari
*/import {trigger,state,style,animate,transition,keyframes} from '@angular/animations';
@Component({
selector: 'my-app',
template: `
<div class="app-heading">
<h2 class="text-center span6"> Angular 2 Animation</h2>
</div>
<div>
<h3>Exmaple : Animation with multiple states.</h3>
</div>
<!-- Angular 2 Animation example starts -->
<div class="section">
<div class="example" >
<button class="btn btn-info" (click)="multipleStateAnimate()">
Click me!
</button>
<div class="hideShow text-center" [@multipleState]="multipleState">
Animating me !
</div>
</div>
</div>
<!-- Angular 2 Animation example ends -->
`,
styles:`
.app-heading{
padding: 5%;
background-color: #eee;
text-align:center;
}
.example{
padding: 5%;
}
.section{
padding-bottom: 2.5%;
margin-bottom: 5%;
border: solid 0.5px #d2d2d2;
}
.hideShow{
padding: 5%;
background-color: #00ffbb;
margin-top: 1%;
}
.resource-provider{
text-align:center;
font-weight:800;
}
`,
animations: [
trigger('multipleState', [
state('state1', style({ width:"100px",height: '100px'})),
state('state2', style({ width:"100px",marginLeft: '80%'})),
state('state3', style({ width:"100px",marginTop: '20%'})),
state('state4', style({ width:"100px",marginLeft: '0%'})),
state('state5', style({ width:"100px",marginTop: '0%'})),
transition('* => *', animate('.5s'))
])
]
})
export class App {
/*---------------------- Angular 2 Animation example starts --------------------*/ multipleState:string = 'state1';
multipleStateAnimate(){
let multipleSateCollection = ['state1','state2','state3','state4','state5'];
let counter = 0;
let interval = setInterval(()=>{
this.multipleState = multipleSateCollection[counter];
counter++;
if (counter === 5) {
clearInterval(interval);
}
},500);
}
/*---------------------- Angular 2 Animation example ends ----------------------*/}Example:
In the above code,
Let’s start from the class App inside the app class we have multipleSateAnimation function which changes the value of multipleState property of the App class after 500 Msec. Inside component decorator, In the animations metadata, we have five state() functions. When the value of MultipleStatechanges accordingly state of the animation reflects on the target elements.
So, for now, that’s it. In the next article, we will implement Navigation drawer using Angular Animation meanwhile if you have any suggestion please let me know in the below comment box.
