One of the most challenging tasks for any UI developer is related to animations. Getting animations to where they need to be with smooth transitions and pixel perfect UI is a tedious task. When Angular developers said ‘Controllers should not access DOM elements directly..!’ all hell broke loose for UI developers!
Not to worry really, Angular2 always comes up with cool stuff to make things easier. Introducing Angular 2 Animations..!
Similar to how templates work hand-in-hand with the component it is associated with, animations follow the same pattern too. I will show a simple working example by creating a side navigation that will leave and enter the screen from the right using Angular animations and will link a plunker
( https://plnkr.co/edit/YiPBicvjELvTeBy1NMZT?p=preview )along so that you guys can play around and get a feel of it.
First of all, we need to create a component and hook up a template to it. I am not going to dive deep into how to create an Angular component or to set up the project ( you can take a look at the plunker for the same), so here is the sample component needed to get us started.
Now that the markup is complete it is time to move on to the exciting bit, i.e., adding the animation. To make use of the /Angular animation, we first need to import state, trigger, transition and animate from the Angular core.
Our navigation menu is at the right end of the screen and the default state of it is hidden. When the menu button is clicked, the menu slides out and becomes visible. There is no need to use *ngIf to hide the menu as we are going to be move the menu off the screen using transform: translate to set the x to 100%. On toggle the navigation will slide back in by resetting the transform to zero.
Angular animations are declared inside the component’s metadata and then applied to the HTML element using the @ decorator.
We can see below that the name of the animation here is ‘toggleMenu’ and it is going to be triggered when an HTML element is attached with the same along with the @ decorator. There are two states opened and closed. In the closed state, as mentioned above we have the translate set to 100% to move it off the screen. In the opened state the translate is set to zero to bring it into the view.
Also transitions are specified so that the animation is smooth when the state goes from opened to closed or vice verse.
Next we need to declare a variable menuState that is going to hold the state of the animation, either ‘opened’ or ‘closed’. The default value of menuState is closed. The state of the animation is going to be toggled by using the toggleMenu() method which is bound to the click event of the menu icon.
The last step would to add the animation to the menu in our HTML using the @decorator within square brackets and give the name of the animation and assign the variable which is going to hold the state when toggled.
The complete file would like like this:
That’s it! It is that simple to add animations in Angular 2. Angular does all the hard work of managing the animations. Previously we could use the @Component decorator to manage the components template and styles which now includes the animations as well.