2016-11-29 40 views
2

我遵循Angular2教程,使用快速入门种子[1]设置了一个本地开发环境,该环境运行良好。然后我决定使用[2]中的第一个例子的缩短版本来测试动画。该app.component.ts看起来是这样的,它通过单击切换背景颜色:Angular2教程动画与IE11不兼容

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 /角度/快速启动/存档/ master.zip

[2]:角.IO /文档/ TS /最新/导向/ animations.html

[3 ]:i.imgur的.com/WU3rvEW.gif

PS:#1不让我上传两个以上的链路,你必须将它们自己复制...

回答