Angular Parallel Animation Groups

Angular Parallel Animation are based in the Web Animations API that basically brings all the power of the animations from the CSS to JS, allowing to do awesome things like pausing or reversing animations right in the code:

let elem = document.getElementsByClassName(‘circle’)[0];
elem.animate({ transform: ‘scale(0)’, opacity: 0 }, 3000);
elem.pause();

Setting up animations

To start using animations in our Angular project we’ll need:

Project:
Install BrowserModule and BrowserAnimationsModule and add them to the package.json (npm install –save @angular/animations @angular/platform-browser) .
Module:
Add them to the modules you we’ll be applying animations (usually the app.module.ts or shared.module.ts).
Component:
– Import the functions you’ll use { trigger, state, style, animate, transition } from ‘@angular/animations’
– Declare the animation in the component’s decorator.

import { Component, OnInit } from ‘@angular/core’;
import { trigger, state, style, animate, transition, group } from ‘@angular/animations’;

@Component({
selector: ‘my-app’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’],
animations: [ …animation declarations ] })
export class AppComponent…

Using animations

// app.component.ts
@Component({
…
animations: [
trigger(‘triggerName’, [
transition(‘initialState => finalState’, [
animate(‘1500ms ease-in’)
])
])
],
…
})

An animation declaration is composed at least by a:

trigger([name], [definitions array]):
Declares the animation with a name, used to apply it in the template.
transition([states], [definitions array]):
Specifies the two states (initialState and finalState) that integrate the animation. ‘=>’ operator is used for unidirectional transitions, and ‘<=>’ for bidirectional ones.
animate(‘[duration] [delay] [ease]’):
Defines the kind of animation that will be applied to the transition between the states.

After declaring the animation in the component, we can apply it to the element we want to animate in the template.

// app.component.html
<div @triggerName>
<p>I’m going to be animated guys…</p>
</div>

Note that we are no using CSS anymore, all the animation is managed in JS and HTML.

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.

• Practice Test for Angular4
• Govt Certification in Angular 4
• Blog posts on Angular 4 and Web Development

Back to Angular 4 Tutorial Main Page