View All Products
Compute
Storage
Networking
Databases
Services
Developer Tools
Industries
Pricing
Community
Engage With Us

Getting Started with Angular Animations

Published by Cameron Laird
Traducciones al Español
Estamos traduciendo nuestros guías y tutoriales al Español. Es posible que usted esté viendo una traducción generada automáticamente. Estamos trabajando con traductores profesionales para verificar las traducciones de nuestro sitio web. Este proyecto es un trabajo en curso.
Create a Linode account to try this guide with a $ credit.
This credit will be applied to any valid services used during your first  days.

Web animations add dynamic graphics and effects to a web page. Movement on a web page communicates information to users and adds visual interest. Animation on a web page is typically achieved by changing the state of an HTML element over time. For example, an HTML element’s color or position can change as a result of user interaction on a web page. Most popular web frameworks offer animation support that simplifies animating elements on your web pages or applications. This guide shows you how to get started creating animations using the Angular web framework.

Setup the Angular Project

  1. Follow the steps in our Getting Started with Angular guide to install Node.js, the Node Version Manager (nvm), and Angular. As a result of following those steps, you should have a directory named example-app in your home folder.

  2. In your Angular project’s root application module, enable the animations module by importing the BrowserAnimationsModule as shown in the following code:

    File: /home/username/example-app/src/app/app.module.ts
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

    The bootstrap key bootstraps the component that contains the majority of your animation code. You create this code in the next section.

Angular Animation Example

The example Angular code used in this guide animates the transition between two background colors contained within a <div> HTML element.

Add Metadata to Angular Component

In your preferred text editor, open your Angular application’s /home/username/example-app/src/app/app.component.ts file and add the animations metadata property to the declared component. The majority of the code used to animate the <div> element is contained in the animations metadata option.

File: /home/username/example-app/src/app/app.component.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  styleUrls: ['app.component.css'],
  animations: [
      //Add the animations metadata option
  ]
})
...

The HTML that is animated is stored in the component’s HTML template which is the ./app.component.html file. You add the HTML code to this file in the next section.

Note

Ensure that the top of your app.component.ts file includes the following import statements.

File: /home/username/example-app/src/app/app.component.ts
1
2

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

Create the Angular Component HTML Template

Your Angular project already contains a component HTML template file. The app.component.ts component file points to the location of the ./app.component.html file in the templateURL metadata. In this section, you add the HTML to animate with Angular.

  1. Open your Angular project’s /home/username/example-app/src/app/app.component.html file and delete all of the example boilerplate code.

  2. Add the example HTML template code as shown below:

    File: /home/username/example-app/src/app/app.component.html
    1
2
3
4
5
6
7

    <h1>Angular Animation Example</h1>

<div (click)="changeState()" [@changeDivColor]=currentState >
  <h2>A Heading Contained in a Div</h2>
  <p>Click inside the Div to view the div's background color change using an Angular animation.</p>
</div>

    The HTML template adds a <div> element that gets animated. For now, the <div> does not call any of the functionality that enables the <div> to be animated. You add this in the next section.

  3. Run the Angular local server with the following command:

     ng serve

  4. Navigate to http://localhost:4200 in a browser window and you should see the rendered HTML.

Add an Angular Animation Trigger

In this section, you add an Angular animation trigger. The trigger is used to bind the animation code and behavior to the HTML element that you want to animate. The animation trigger contains the animation states that define the div’s background color state change.

Open the component file and add the trigger() function to the animations metadata object.

File: /home/username/example-app/src/app/app.component.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

@Component({
  selector: 'app-root',
  templateUrl: './div-animation.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('changeDivColor', [
        //Animation states are added here.
    ])
  ]
})
...

In the example above, changeDivColor is the animation trigger. This trigger can now be called in your Angular component template. You complete that step in one of the following sections. The next section shows you how to add animation states to your component.

Add Angular Animation States

Angular animation states specify the change that you want to apply during your animation. For the example, the <div> background color’s state should change from one color to another. You use Angular’s state() function to name the state and define the element’s CSS styles that are associated with the state.

Open the component file and add the two state() functions to the changeDivColor state of the trigger() function as shown below:

File: /home/username/example-app/src/app/app.component.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

@Component({
  selector: 'app-root',
  templateUrl: './div-animation.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('changeDivColor', [
      state('start', style({
        border: '5px outset blue',
        backgroundColor: 'green',
        textAlign: 'center'
      })),
      state('end', style({
        border: '5px outset blue',
        backgroundColor: 'lightgreen',
        textAlign: 'center'
      })),
    ])
  ]
})
...

The state functions assign a name to each state and provide their associated styles. The start state uses a background color of green, while the end state uses a background color of light green.

Add Angular Animation Transitions

Now, you need to define the Angular animation’s transitions from one state to another. To do this, you use the transition() function.

Open the component file and add the transition() function to the end of the trigger() function as shown below:

File: /home/username/example-app/src/app/app.component.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

...
@Component({
  selector: 'app-root',
  templateUrl: './div-animation.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('changeDivColor', [
      state('start', style({
        border: '5px outset blue',
        backgroundColor: 'green',
        textAlign: 'center'
      })),
      state('end', style({
        border: '5px outset blue',
        backgroundColor: 'lightgreen',
        textAlign: 'center'
      })),
      transition('start <=> end', animate('1000ms'))
    ])
  ]
})
...

The updated code above creates a state-to-state transition. The first state transition goes from the start state to the end state, while the second transition does the opposite. This state transition allows you to toggle between both states each time a user clicks on the bound HTML element (the <div> element). The transition() function uses the animate() function to specify the timing for the transition.

Add the Toggle Function

Now that your animation is defined, you need to add a function that can detect the <div> state and toggle between the two states.

Add the following toggleState() function to your AppComponent class. The AppComponent class is located below the @Component decorator.

File: /home/username/example-app/src/app/app.component.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

...
export class AppComponent {
  title = 'example-app';

  divState = 'start';

  toggleState() {
    this.divState = this.divState === 'start' ? 'end' : 'start';
  }
}

The code above adds a divState variable that stores the current toggle state of the <div>. The toggleState() function uses a conditional ternary operator to update the value of divState depending on its current value.

Now that your animation code and toggle functionality is in place, you need to update the Angular HTML template to bind everything together. You complete this in the next section.

Bind the Animation Trigger to the HTML Component Template

In this section, you bind the animation trigger you created in the previous steps to the <div> element.

  1. Open your HTML component template and add the animation trigger to the <div>. You also add a click event that invokes the toggleState() function you added to the AppComponent class declaration.

    File: /home/username/example-app/src/app/app.component.html
    1
2
3
4
5
6
7

    <h1>The div element</h1>

<div (click)="toggleState()" [@changeDivColor]=divState>
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>

    Notice that the @changeDivColor trigger binding is set to the value of the divState variable. This enables the div to begin in the start toggle state. You are now ready to view your animation.

  2. Navigate to http://localhost:4200 in a browser window and you should see the rendered HTML.

    Angular rendered green HTML div.

    Click inside the <div> container and you should see the animated background color transition from green to light green and vice versa, with each click.

    Angular rendered light green HTML div.

Conclusion

This guide showed you how to use the Angular framework to get started creating animations. Angular’s triggers, states, and transitions help you animate elements on a web page. The basic example included in this guide provides a foundation that you can use to create more advanced animations using the Angular query() and stagger() functions.

More Information

You may wish to consult the following resources for additional information on this topic. While these are provided in the hope that they will be useful, please note that we cannot vouch for the accuracy or timeliness of externally hosted materials.

This page was originally published on

Your Feedback Is Important

Let us know if this guide was helpful to you.

Join the conversation.
Read other comments or post your own below. Comments must be respectful, constructive, and relevant to the topic of the guide. Do not post external links or advertisements. Before posting, consider if your comment would be better addressed by contacting our Support team or asking on our Community Site.
The Disqus commenting system for Linode Docs requires the acceptance of Functional Cookies, which allow us to analyze site usage so we can measure and improve performance. To view and create comments for this article, please update your Cookie Preferences on this website and refresh this web page. Please note: You must have JavaScript enabled in your browser.