Angular2 animation learning resources

Question

Are there any good / in depth resources available for learning animation in Angular2 apart from the basic API reference on www.angular.io ?

Answer 1

Animation in Angular 2 has changed many times during development, and is changing again in RC2. Here is a resource that I used for an app using RC1, though the technique was not officially available, and undocumented. As it says at the top of the article, there is a new library in RC2.

I confess that I have not tried RC2, but here is my take. You don't need an animation library (for most things). Just use css transitions with class and style directives.

As an example, similar functionality to the linked article can be achieved with this code:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
             <button (click)='toggleHeight()'>Show/Hide</button>
             <div [style.height]='divHeight'>
                Sed ut perspiciatis unde omnis iste natus error sit
                voluptatem accusantium doloremque laudantium, totam
                aperiam, eaque ipsa quae ab illo inventore...
             </div>
            `,
   styles:  [`
              div {
                overflow-y: hidden;
                transition: height 2s ease;
              }
            `]
})
export class AppComponent {
    divHeight: string = '500px';
    shown: boolean = true;

    toggleHeight() {
        this.shown = !this.shown
      this.divHeight = this.shown? '500px' : '0';
    }
}

Here is working plunkr