Angular2 tutorial animations not working with IE11

Question

I followed the Angular2 tutorial to setup a local development environment with the quick start seed [1], which worked well. Then I decided to test animations using a shortened version of the first example in [2]. The app.component.ts looks like this and it toggles the background color by clicking:

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');
  }
}

This works well in Chrome and Firefox, but not in IE11. There is no transition is IE11, the background changes instantly (see [3])

I did no project setup of my own and pretty much no coding either except for the inserted animation code. Is there any way to say why this doesn't work?

Thank you!

[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 doesn't let me post more than two links, you have to copy them yourselves ...

Answer 1

Angular animations use web animations API and IE does not support it.

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

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

You can add polyfill to get it working

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