Front End - Angular 2

Angular 2 animation

The animation of Angular 2 is built on top of its component and is meta driven. In another word, instead of using certain API to implement the animation in the code, Angular 2 requires you to declare the animation in the component’s meta data.

Here is a simple example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import {style, animate, transition, state, trigger} from '@angular/core';
@component({
    selector: 'mypane',
    template: '<div [@showState]="show">This is a test view</div>',
    animations: [
      trigger('showState', [
        state('on', style({opacity: 1})),
        state('off', style({opacity: 0})),
        transition('on => off', [animate('0.2s ease-out')]),
        transition('off => on', [
          style({transform: scale(0.5)}),
          animate('0.2s ease-in', style({transform:scale(1)}))
        ])
      ])
    ]
})
export class MyPane {
  show: string;
  turnOn() {
    this.show = "on";
  }
  turnOff() {
    this.show = "off";
  }
}

Let’s discuss this sample step by step

  1. We need to define an animation entry.
    An animation entry or animation trigger must be defined for an element to indicate which element should have the animation effect. Here the ‘@showState’ is defined for the ‘div’.

  2. We create a ‘animations’ entry in the component meta data.
    The ‘animations’ contains a series of ‘triggers’, e.g trigger(‘showState’) in the above example, each of which corresponds to an animation entry. Please be noted, we need to remove the leading ‘@’ from the entry name when put it in the ‘trigger’.

  3. Each animation entry can have multiple states and optionally we can define css style for each state.
    Here we define styles for state ‘on’ and ‘off’

    1
    2
    state('on', style({opacity: 1})),
    state('off', style({opacity: 0})),

  4. We need to define the animation effect when an animation entry changes from one state to another. The syntax is transition(‘state change expression’, [step1, step2,…,stepN]).
    The ‘state change expression’ describes how the states change, for example ‘on => off’ means changing state from ‘on’ to ‘off’, ‘off => on’ means changing state from ‘off’ to ‘on’ and ‘on <=> off’ means a bidirectional change.
    The [steps] is the most important part for the animation implementation. It lists all the actions the animation effect will involve. The legitimate actions are ‘style’ and ‘animate’. The ‘style’ action can only be used as the first one, indicating the initial style of the animation. We will focus on the ‘animate’ action. The ‘animate’ accepts two arguments, the first of which is a string with format ‘duration delay ease-function’. The duration and delay both use time unit like ‘0.5s’ or ‘200ms’. The ease function tells how the animation frames change along the time line. The most popular ones are ‘ease-in’ and ‘ease-out’ and you can find more from here. The second argument is an optional ‘style’ to tell what is the final style when the animation ends. If it is missing, the style defined by the ‘state’ will be used.
    Please be noted: All the styles defined in the ‘transition’ are not permanent and will disappear after the animation complete.

Let’s go through the above example to see how the ‘transition’ works.

1
2
3
state('on', style({opacity: 1})),
state('off', style({opacity: 0})),
transition('on => off', [animate('0.2s ease-out')]),

The code above means when the state changes from ‘on’ to ‘off’, an animation will start without delay and last for 0.2 second, playing with ‘ease-out’ function. Because we defined the style for state ‘on’ as ‘opacity: 1’ and style for state ‘off’ as ‘opacity: 0’. The animation implements a fade-out effect.

1
2
3
4
transition('off => on', [
  style({transform: scale(0.5)}),
  animate('0.2s ease-in', style({transform:scale(1)}))
])

The code above means when the state changes from ‘off’ to ‘on’, an animation will start without delay and last for 0.2 second, playing with ‘ease-in’ function. In addition, we specify the scale factor 0.5 at the beginning and scale factor 1 at the end. The animation implements a fade-in and scaling effect and the ‘scale’ style will be removed after the animation is finished.

Sometimes we want to have some animation effects when navigating pages by the router. When navigating from page A to page B, the page A is destroyed and the page B is initiated. The trick is how to define the animation entry and states changes. Angular 2 provides two special states, “*“ and “void”. “*“ stands for any state and “void” stands for none state. Therefore, the destroying process of page A can be described as “* => void” and the initiating process of page B can be described as “void => *“.

Additionally, we also don’t need to bind the animation entry with a variable but just assign it with any arbitrary value.

1
<div [@showState]="true">This is a test view</div>

Or even simpler, we can just define the animation entry in the meta but not the template view.

1
2
3
4
5
6
@component({
    selector: 'mypane',
    template: '<div>This is a test view</div>',
    host: { '[@showState]': 'true' },
    animations: [...]
})

We define the animation entry in the ‘host’ which is the wrapper parent element automatically created by the Angular 2.