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/archive/quickstart/archive/master.zip..com

2:角..io/docs/ts/最新/指南/动画.docs

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

您可以添加多填充以使其工作。

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