Handling Angular Animation

In this chapter, we will learn about Angular animations. Animation; the very word sounds fun and creative, so tighten your seat belt; we will have fun learning Angular animations. Motion in web applications is one of the critical and crucial design factors and is a primary driver for good user experience. Transitions in particular are of great interest, as they enable the elements of the applications move to from one state or another.

The following topics are covered in detail in this chapter:

• Introduction to Angular animations
• Built-in classes in Angular 2 to support animation
• Understanding and learning to use animation modules, transition, states, keyframes, and so on
• Animating page transitions
• Animating toggle/collapse accordion slides

Introduction to Angular animations

Angular comes with solid native support for animations since motion and transition are a major part of any application.

Angular has a built-in animation engine, which also supports and extends the Web animations API that runs on most modern browsers.

We have to install Angular animations separately in your project folder. We will create some examples for animations in the following sections.

Installing the Angular animations library

As we discussed earlier, Angular animations have been forked out as a separate library and need to be installed separately.

In this section, we will discuss how to get the latest Angular animation version and install it; follow these steps:

1. Get the latest Angular...

Summary

In this chapter, we introduced Angular animations. Animations are key to designing and building beautiful user experiences with smooth transitions and element effects.

We covered how to install and import the Angular animations library and use various modules inside the library.

We discussed important modules, such as state, style, animate, trigger, transition, and keyframes.

We created and implemented some examples using Angular animations.

Finally, we created a web application sidebar menu with some animations. Now, over to you!

In the next chapter, you will learn how to integrate Bootstrap with Angular applications. Bootstrap is arguably the most popular frontend framework out there and, in this chapter, you will learn what it means to have an Angular x Bootstrap application.