Question

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

Answer 1

Angular 2中的动画在开发过程中已经多次更改，并且在RC2中再次发生变化。 Here is a resource that I used for an app using RC1，虽然该技术尚未正式提供，但没有记录。正如文章顶部所说，RC2中有一个新的库。

我承认我没有尝试过RC2，但这是我的看法。你不需要动画库（大多数情况下）。只需使用带有class和style指令的css过渡。

例如，使用以下代码可以实现与链接文章类似的功能：

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动画学习资源

1 个答案: