Angular2动画学习资源

Question

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

Answer 1

Angular2 中的动画在开发过程中更改了很多次，并且在 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

Angular2动画学习资源

Angular2 animation learning resources

ng-animate

angular