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

角度动画使用网络动画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

Answer 2

尝试以下步骤在IE11中执行动画：

1. 运行npm install --save web-animations-js。
2. 添加import 'web-animations-js在polyfills.ts中自己添加;

您的动画将在IE10 +，IE11等浏览器中运行。

有关详细信息，请参阅以下链接 - > https://angular.io/guide/browser-support