animation - Angular2 教程动画不适用于 IE11

Question

我按照 Angular2 教程使用快速启动种子 [1] 设置了本地开发环境，效果很好。然后我决定使用 [2] 中第一个示例的缩短版本来测试动画。 app.component.ts 看起来像这样，它通过单击切换背景颜色:

import {
  Component, trigger, state, style, transition, animate
} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<div [@heroState]="state" (click)="toggleState()">
                <h1>TourOfHeroes</h1>
            </div>
  `,
  animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc'
      })),
      transition('inactive => active', animate('1000ms ease-in')),
      transition('active => inactive', animate('1000ms ease-out'))
    ])
  ]
})

export class AppComponent {

  state = 'active';

  toggleState(){
    this.state = (this.state === 'active' ? 'inactive' : 'active');
  }
}

这在 Chrome 和 Firefox 中运行良好，但在 IE11 中不起作用。没有过渡的是IE11，背景瞬间变化(见[3])

我没有自己做项目设置，除了插入的动画代码之外几乎没有编码。有什么办法可以说明为什么这不起作用吗？

谢谢!

[1]:github.com/angular/quickstart/archive/master.zip

[2]: Angular .io/docs/ts/latest/guide/animations.html

[3]:i.imgur.com/WU3rvEW.gif

PS:Stackoverflow 不允许我发布两个以上的链接，你必须自己复制它们......

Answer 1

Angular 动画使用 Web 动画 API，IE 不支持。

http://caniuse.com/#feat=web-animation

https://angular.io/docs/ts/latest/guide/animations.html

您可以添加polyfill使其工作

https://github.com/web-animations/web-animations-js