Angular Animations, easy as pie

An introduction to Angular animations

Published by: Maarten Mensink on: vrijdag 23 juni 2017

The @angular/animations module has a easy to use but powerful Domain Specific Language (DSL) for creating animations for your Angular components.

In this post i will go over the basics to get you started with animating your components. The following functions will be used in the demo

Our component

The goal is to create a animation for a component. This is the component that we will be animating. I have omitted some code for readability please look at the plunker sample for all the code.

@Component({
  selector: 'listview',
  template: `..........`,
  styles: [`.........`],
   host: {
        '[@visibilityChanged]': 'visibility'
    },
   animations: [
        trigger('visibilityChanged',
            [
                state('visible', style({ left: '0' })),
                state('hidden', style({ left: '-400px' })),
                state('void', style({ left: '-400px' })),
                transition('visible => hidden', animate(300)),
                transition('hidden => visible', animate(300)),
                transition('void => visible', animate(300))
            ])
    ]
})
export class ListViewComponent {

  private hidden:string="hidden";
  private visible:string="visible";

  @Input() visibility:string = this.visible;

  hide():void{
    this.visibility = this.hidden;
  }

  show():void{
    this.visibility = this.visible; 
  }

}

Angular 2 vs Angular 4

Their has been a major version update of Angular so depending on which major version that you are currently using you will need to import the animations functions from different locations .

For Angular 2 you will need to import the following

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

For Angular 4 you will need to import the following

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

The Plunker demo runs on version 4 but all the code of this demo should work on version 2 as well.

Trigger

All animations start with a trigger of some sort. A user or the system can cause a event on which the animation is started.

We can define a trigger with the trigger function.

trigger('visibilityChanged', AnimationMetadata.......)

Now that we have defined our animation trigger we need to bind the trigger to the element we want to animate. We want to animate our entire component(the host element) so we will use the host tag in the @Component annotation for defining the binding. The stateExpression provide to this binding is used by the animation engine to decide if the animation should be triggered.

host: {
    '[@visibilityChanged]': 'stateExpression.....'
},

Code snippet

@Component({
  selector: 'listview',
  template: `........`,
   host: {
        '[@visibilityChanged]': 'visibility'
    },
   animations: [
        trigger('visibilityChanged',
            [
                state('visible', .....),
                transition('') 
            ])
    ]
})

States

A animations has several states. To a state you can associate style which will be persisted when the animation ends. Our component will have 3 states in total.

state('visible', style({ left: '0' })),
state('hidden', style({ left: '-400px' })),
state('void', style({ left: '-400px' })),

The void state is a reserved word in the DSL. This state is given to components that are no longer part of the application. For example the component has a *ngIf statement which becomes false

Transitions

To animate between the states that we have just defined we need to create a transition between these states.

A transition function describes how to transition between the states. The following transition describe the transition between 'visible' and 'hidden'. and that should animate in 300 milliseconds.

transition('visible => hidden', animate(300)),

Bringing it all together

We declared our trigger, states and transitions. Now all that is left is to put the animation in motion. The component has two methods hide() and show(). Within these methods we update the property visibility. This property is binded to our trigger visibilityChanged and updating the value of the property will trigger the animation.

@Component({
    ......
   host: {
        '[@visibilityChanged]': 'visibility'
    },
   animations: [.......]
})
export class ListViewComponent {

  private hidden:string="hidden";
  private visible:string="visible";

  @Input() visibility:string = this.visible; //this will trigger the component to animate from void => visible

  hide():void{
    this.visibility = this.hidden;
  }

  show():void{
    this.visibility = this.visible; 
  }
}

Plunker sample

Laatste artikelen

Tags:

  • Angular 2
  • Angular 4
  • Animations