Angular is a popular front-end framework made by Google. Like other popular front-end frameworks, it uses a component-based architecture to structure apps.

In this article, we look at how to create animation effects in an Angular app.

Getting Started

To get started, we need to enable the animations module.

We do that by writing the following:

app.module.ts :

import { BrowserModule } from "@angular/platform-browser";  
import { NgModule } from "@angular/core";  
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";  
import { AppComponent } from "./app.component";

@NgModule({  
  declarations: [AppComponent],  
  imports: [BrowserModule, BrowserAnimationsModule],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule {}

Then we import the animation functions into our component file as follows:

app.component.ts :

import {  
  trigger,  
  state,  
  style,  
  animate,  
  transition,  
  // ...  
} from '@angular/animations';

Finally, we add the animation metadata property to our component as follows:

@Component({  
  selector: 'app-root',  
  templateUrl: 'app.component.html',  
  styleUrls: ['app.component.css'],  
  animations: [  
    // animation triggers go here  
  ]  
})

Animation State and Styles

We call the state function to define different states to call at the end of each transition.

It takes a name and a style function. It takes an object with the CSS styles with the style attribute names in camelCase.

We then define transitions with the transition function, which takes the state transition string, and an array with the animate function call with the time string for animation.

All of the state and transition calls are wrapped in an array as the 2nd argument of the trigger function.

The first argument of the trigger function is the name of our trigger.

We write an app with all the parts to create a simple transition effect as follows:

app.module.ts :

import { BrowserModule } from "@angular/platform-browser";  
import { NgModule } from "@angular/core";  
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";  
import { AppComponent } from "./app.component";

@NgModule({  
  declarations: [AppComponent],  
  imports: [BrowserModule, BrowserAnimationsModule],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule {}

app.component.ts :

import { Component } from "@angular/core";  
import {  
  state,  
  style,  
  transition,  
  animate,  
  trigger  
} from "@angular/animations";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"],  
  animations: [  
    trigger("openClose", [  
      state(  
        "open",  
        style({  
          height: "250px",  
          opacity: 1,  
          backgroundColor: "pink"  
        })  
      ),  
      state(  
        "closed",  
        style({  
          height: "100px",  
          opacity: 0.5,  
          backgroundColor: "green"  
        })  
      ),  
      transition("open => closed", [animate("1s")]),  
      transition("closed => open", [animate("0.5s")])  
    ])  
  ]  
})  
export class AppComponent {  
  isOpen = true;toggle() {  
    this.isOpen = !this.isOpen;  
  }  
}

app.component.html :

<button (click)="toggle()">Toggle</button>  
<div [@openClose]="isOpen ? 'open' : 'closed'">  
  {{ isOpen ? 'Open' : 'Closed' }}  
</div>

In the code above, we imported the BrowserAnimationModule in AppModule .

Then in the animations metadata array of the AppComponent , we add the animation trigger with the trigger function.

We then have the transition states which are generated with the state function.

The state function takes a style function call which returns the styles for each state of the transition.

The style function takes an object with the CSS style for each transition state.

In the component, we have the toggle function toggle the isOpen field when it’s called.

With the transition function calls, we specify the animation intervals with the animate function with the time string passed in.

Finally, in the template, we add the openClose trigger to the div. We display the style for the `open' state when isOpen is true and display the style for the 'closed' state otherwise.

If we have another trigger, we can change the name openClose to the other trigger name.

In the end, when we click the Toggle button, we see a yellow background with a height of 250px and a pink background with a height of 100px. The opacity also changed as specified.

Animations API Summary

The Angular animations API has the following function:

• trigger — starts the animation and serves as the container for all animation function calls.
• style — defines the CSS style for each stage of the animation
• state — creates a named set of CSS styles that should be applied on a successful transition to a given state
• animate — specifies the timing information of the animation
• transition — defines the animation sequence between 2 named states
• keyframes — allows a sequential change between styles within a specified time interval
• group — specifies a group of animation steps to be run in parallel
• query — use to find one or inner HTML elements within the current element
• sequence — specifies a list of animation steps that are sequentially
• stagger — staggers the starting time for animation for multiple elements
• animatiom — produces a reuseable animation that can be invoked from elsewhere
• useAnimation — activates a reuseable animation
• animateChild — allows animations on child components to be run within the same timeframe as the parent

Conclusion

We can create animations with the built-in Angular BrowserAnimationsModule .

To create a simple transition effect, we just have to specify a trigger, then the states of the animation with the styles.

Then we have to specify what to do when we transition to different states.