Angular2 animation learning resources

Question

Are there any good / in-depth resources for learning animation in Angular2 besides the basic API link at www.angular.io?

Answer 1

Animation in Angular 2 during development changed many times and again changes to RC2. Here is the resource that I used for an application using RC1 , although this method was not officially available and was not documented. As stated at the beginning of the article, RC2 has a new library.

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

As an example, similar functionality for a related 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'; } } 

Plunkr works here