Angular 2 – Animation basics.

Hi Friends,

Hope you are all well. This post is again a response to many of our friends asking me about animations in Angular 2. Well, Angular 2 does have something for that as well and in this post we will be looking into the very basics of it.

Let’s begin.

A video screencast of this post

 

The complete code for this post can be found here.

 

Scaffold out a new application using the below command.

Now open up the project in any code editor. Open up app.component.html and add the below line of code.

Now we’ll animate this. i.e., try to move this along the x-axis.

Any animation will consist of the four lines:

Trigger – The flag used to apply the particular animation on any element on our page.

State – The before & after states of the animated element.

Transition – The animation to be applied when the element transitions from one state to another.

Animate – The actual effect to be applied while the transition happens along with the timing.

Now open up app.component.ts and modify it as shown below.

As you can see there is now an animations property under the component decorator.

The name of the animation trigger is movementtrigger. It has 2 states namely firstpos & secondpos. There are two transitions explaining explicitly what should happen when the element moves from one state to another. In this case moving along the X axis by 10 %.

I have also added a togglestates() method which will simply toggle between two strings (firstpos & secondpos).

Now let’s make use of this in our html.

Open up app.component.html again and modify it as shown below.

We invoke the movement trigger on the <h1> element. The state is changed using a button. Now run the app. You should see the result as shown below.

giphy (1)

That’s how animation is done guys. Now let’s do something cool. We’ll see how make a box appear and disappear on screen.

Open up the app.component.ts and add another trigger so that our code contains two triggers now.

The showmsg trigger is used to show the message box on the screen. A double ended arrow denotes transitions between both states and vice versa.

Also ensure that the togglestates() method is modified as shown.

Now open up app.component.html and modify it as shown below.

Open up app.component.css and add the below lines of code.

Now run the code again and you would see a cool animation as shown below.

giphy

This is how animations are done in angular 2. Now as I said before I have just touched up on the very basics. But you could build up your skills in animating UI using this as a stepping stone.

Thanks for reading guys. Peace.. :)

 

  • bennypowers

    Thanks for this tutorial. Can this method be applied to component router transitions?

    • I don’t think so bro.. I mean while doing this I tried to trigger animations in the router-outlet directive. It din’t work out. Or rather, I couldn’t get it to work. Will let you know if I figure it out.. :) Thanks for reading bro. Have a nice day.