Help! I’ve Had To SSH Into A Linux Box For The First Time (Part 3)

Sep 12, 2022

Adding Animation To Your Application The Angular Way

Tags

Adding animation effects could be done in a number of ways, namely CSS/SASS or a library, but Angular could also do this plus the benefit of reusability and easy implementation.

Starting Point

Firstly we have to make sure we have the animations package installed (creating a new project usually has this added already).

Install the animations package:

npm install --save @angular/animations

Then just add the BrowserAnimationModule to you app's main .module file.

Now the fun starts

Lets define an animation (I decided to create a separate module file to hold all my animation styles).

Note that I also had to import all the animation methods used in my logic.

All of these built-in methods all have an important task:

trigger - accepts a name for the animation trigger and an array of state and transition methods to configure the animation.
style - CSS styles to be applied.
transition - specifies the configuration for transitioning between the different states and its direction.
animate - specifies the duration and any additional CSS animation properties such as easing.

Let's Implement

On the page/component I want to use my animation, import it into the component class;

and add it to the component decorator using the animations property.

Now simply add this animation to any div or directive you would like to animate like so;

And that's how easy it is to add animations in an Angular app.

Note how easy it would be to reuse this animation in a different component or event import and add more than one animation to the same component.

Contact us

Werner Bestbier

Werner is a front-end developer with a background in design. Making a users web-surfing life easy is his game. His preferred language/framework is Javascript and Angular.

Help! I’ve Had To SSH Into A Linux Box For The First Time (Part 3)

Adding Animation To Your Application The Angular Way

Contact us

Related posts:

Werner Bestbier

Leave a Reply Cancel reply