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动画使用网络动画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 中执行动画：

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

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

有关更多详细信息，请参见下面的链接-> https://angular.io/guide/browser-support

Angular2教程动画不适用于IE11

2 个答案: