Introduction to Angular 2 Animations

When it comes to Web Development, Animations can make or break your UX.
Too much of them and your website looks like a Vegas Casino.
None and your website will be missing the little spark to make it stand out.

Angular has made some great improvement in this domain since version 1.3 so let's see what Angular 2 offers!

This tuts will be structured in two parts.
In the first part, we will have a look at the Enter and Leave state changes expressions and in the last one we will finish our introduction by manipulating our own states and transitions.

Before starting, if your targeted browser isn't compatible with the standard web animations API(IE 10 for example), just head there and add this lib to your polifylls file.

Enter and Leave Animations

For this tuts, we will create one square Component and use it in our main template like this:

<square></square>

Here is our basic square Component's template:

<div class="square" [@squareState]="state"
  *ngIf="isVisible" (click)="isVisible = false">
</div>

We have one very important trigger name squareState, this attribute's value will depend on a state property that we will use later in our Component.
When clicking on the square we will make it disappear.

Accompanied by this CSS to draw our square:

.square {
  width: 100px;
  height: 100px;
  background-color: green;
}

Now let's have a look at square.component.ts:

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

@Component({
  selector: "square",
  templateUrl: "square.component.html",
  styleUrls: ["./square.component.css"],
  animations: [
    trigger("squareState", [
      transition(":enter", [
        style({ opacity: 0 }),
        animate("2500ms", style({ opacity: 1 }))
      ]),
      transition(":leave", [
        style({ opacity: 1 }),
        animate("2500ms", style({ opacity: 0 }))
      ])
    ])
  ]
})
export class SquareComponent implements OnInit {
  isVisible: boolean;

  ngOnInit() {
    this.isVisible = true;
  }
}

First we import everything that we need to work with Angular 2 animations.
We then use the animations property in order to do the work.

In Angular 1 we used the ng-enter class, however, in Angular 2 it's done differently, we now use transitions with ":enter" and ":leave".
For each transition we set a starting style, an animation speed and an ending style.
Typically here when entering on the DOM, the element will be animated for 2.5 seconds.
Its opacity will go from 0 to 1 (0, 0.1, 0.2 ... 1).
And the opposite effect for the ":leave" transition.

Custom States and Transitions

Now let's create our own states:

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

@Component({
  selector: "square",
  templateUrl: "square.component.html",
  styleUrls: ["./square.component.css"],
  animations: [
    trigger("squareState", [
      transition(":enter", [
        style({ opacity: 0 }),
        animate("2500ms", style({ opacity: 1 }))
      ]),
      transition(":leave", [
        style({ opacity: 1 }),
        animate("2500ms", style({ opacity: 0 }))
      ]),
      state("zero", style({ transform: "translateX(0)" })),
      state("one", style({ transform: "translateX(50%)" }))
    ])
  ]
})
export class SquareComponent implements OnInit {
  isVisible: boolean;
  state: string;

  ngOnInit() {
    this.isVisible = true;
    this.state = "zero";
  }

  changeState(newState) {
    this.state = newState;
  }
}

And update our template:

<div class="square" [@squareState]="state"
    *ngIf="isVisible" (click)="isVisible = false"></div>
<input type="text" [(ngModel)]="newState"/>
<button (click)="changeState(newState)">Change State</button>
Current state : {{state}}

(Don't forget to add the FormsModule).

When typing 'zero' or 'one' then validating, our cube will move according to the corresponding style.

Finally let's add the transitions to animate our beautiful cube:

@Component({
  .
  .
  .
        state('zero', style({ transform: 'translateX(0)' })),
        state('one', style({ transform: 'translateX(50%)' })),
        transition('zero => one', animate('500ms ease-in')),
        transition('one => zero', animate('500ms ease-in')
        // or
        //transition('one <=> zero', animate('500ms ease-in'))
      ])
  ]

})

And voila we have our one and zero states animated!
You can have a look at the demo here.

Angular 2 provides two specific states that should be used carefully:

• The Void state: usable only when the element is created or destroyed.
• The Wildcard state: usable whenever you want. Just like a joker in a card game, this state can replace any state.

Conclusion

Angular 2 animations' work is mostly done in the animations property of the Component.
The styles set into the states will stay there whereas the ones that are set for transition will disappear once the transition is done so don't be surprised if your style 'reset' once the animation is done.
I advise you to be careful when using the Void and the Wildcard states. The use of those states can potentially generate Spaghetti animations that will be hard to debug.