For some reason I’ve procrastinated looking in to transition animations in Angular.
Transitions are visually pleasing, and it can give your application a nice feel that makes your users think “Wow, this is a nice site.”
Subtle animations are the best – the ones you don’t really notice unless you’re looking for them. They’re so pervasive by big companies that now if you don’t have transitions people might say “what’s wrong with this?”
Fortunately, simple animations in Angular are pretty easy to pull off.
Add BrowserAnimationsModule
First, assuming that you’re making a web site (that is going to be viewed in a browser), you need to import the BrowserAnimationsModule:
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
Create an animation
Next, create an AnimationTriggerMetadata. This basically defines which the events to hook the animation on to, and what to do during those events. In this really simple example, we just fade in when the component is visible, and fade out when it is going away:
I made it a property on a static class so that I could re-use it across multiple components.
Add to the component
Then you need to register the animation with the component. This is simple, you just add the AnimationTriggerMetadata to the animations array in the @Component metadata.
Add to the template
Finally, add it to your template via the name of the animation trigger (in our case, ‘fadeInOut’) on the element that you want to apply the animations:
