Angular2动画学习资源

Question

是否有任何可用于学习的良好/深度资源Angular2中的动画除了www.angular.io上的基本API参考吗？

Answer 1

Angular 2中的动画在开发过程中发生了很多次变化，并在RC2中再次发生变化。 Here is a resource that I used for an app using RC1，虽然这项技术还没有正式提供，并且没有记录。正如文章顶部所述，RC2中有一个新库。

我承认我没有试过RC2，但这里是我的要求。您不需要动画库（对于大多数情况）。只需使用css转换class和style指令。

作为一个例子，到链接物品类似的功能可以与该代码来实现：

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