Angular2 animation learning resources [closed]

Question

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

Molehill

youtube.com/results?search_query=ng-conf+animation but not yet available - probably RC2 – Ouabain

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

Vivid

Thanks for the plunkr example. What's your take on using an animation library like the popular animate.css daneden.github.io/animate.css to take care of animations vs having to write and test raw CSS as shown in your snippet ? – Molehill

I would definitely use that if it has animations that you want to use. Animation has been an in-demand feature for javascript libraries, but you can see that css animations are very simple (1 line!) and also very powerful if you know what you are doing (I don't). Why add complexity to your application code? Styles, including animations belong in stylesheets. – Vivid