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: Whosebug 不允许我post超过两个链接，你必须自己复制...

Answer 1

Angular动画使用网页动画APIIE不支持

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 中执行动画：

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

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

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

Angular2 教程动画不适用于 IE11

Angular2 tutorial animations not working with IE11

animation

internet-explorer-11

angular