Learn Angular 5 Animations with example In 10 Minutes

0

This article will help you to understand the Angular 5 animations. If you’re aware of Angular 5 New Features, you can easily grasp this article.

Animations are always been an important aspect of the design of any modern web application. Awesome interfaces with smooth transitions always kept the attention of the users.

Animation provides, not only the well-designed UI but it also adds the fun feature while playing with animations and it makes the things cool and interesting.

Installation of Angular 5 Animations

We can easily install the animation library by using NPM command.

npm install @angular/animations@latest --save

Next, we need to import it into the main module of the app to make the library enable throughout the app.

/src/app/app.module.ts

// Other imports removed for brevity
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [
    // other modules removed for brevity
    BrowserAnimationsModule
  ],
})

Importing Animations

Now, you can import the animations to your component.

import { trigger,style,transition,animate,keyframes,query,stagger } from '@angular/animations';

Defining Animations

Here we can define the animation in a component within the @Component decorator.

The animation-specific method trigger() will be used to define the name of a animation as a first argument, and then array of animations.

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  animations: [

    // Animations here...

  ]
})

That’s it, it’s a formula to add and use the animation in your Angular 5 app.

Now, let’s play with an animation example to understand it’s practical version.

Example: Transitioning between two states

You can simply build an animation that transitions an element between two states i.e. Active / InActive.

First of all, you can import the animations in your component.

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

Next, you can define the trigger method with statusState name in first argument in the component metadata.

Simply, it uses the animation to transitions between two stats. When an element is active, it appears in slightly larger size and lighter color.

animations: [
  trigger('statusState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

Now, under the template you can attach the animation by using [@triggerName], which will be [@statusState] in our case.

Note: This players is an array and consider it as a static array with needed values.

template: `<ul>
    <li *ngFor="let player of players"
        [@statusState]="player.state"
        (click)="player.toggleState()">
      {{player.name}}
    </li>
  </ul>`,

The output would be something like below. Once an element is active, it will be bigger in size.

Angular 5 Animation Example

It’s easy peasy, right?

IMHO, it’s just a very straightforward process of adding and using the animations in your Angular 5 app.

Moreover, If you’re looking to play around with available animations examples, here is a list that will help you.

That’s it, I hope this article helped you to understand the concept of Angular 5 animations.

Finally, there are lot of things in animation library, it’s a good starting point for Angular 5 animations in your apps.

Leave a Reply

avatar
  Subscribe  
Notify of