Getting started with Angular 2 Animation (example)

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,

  1. Hide show with Animation.
  2. Animation with multiple CSS properties.
  3. 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:

  1. Hide and Show using Animations (FadeIn Fade out) Demo
  2. Animating (using multiple css changes) Demo
  3. Animation with multiple states Demo

 




 

1. Empowering Angular application with animation

To enable Angular animation our project first we need to import the BrowserAnimationsModule. 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:

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.

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.

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.

Explanation:

1. The animations metadata as I told you before, contains the list of trigger functions. trigger creates an animation trigger when the expression bound to the trigger changes, Means when you will change the value of hideShowIndentifier property your animation will occur on the target element.

2. trigger expects 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,

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.

  1. Animation with multiple CSS properties.
  2. Animation with multiple states.

3. Animation with multiple CSS properties

In this example, we will implement the animation using multiple CSS properties.

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,

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  MultipleState changes 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.