Angular 2.1.0 transition（）が動作しない

Question

私はAngular 2アプリケーションにアニメーションを追加しようとしていますが、動作していません。私はインターネットから入手した例を使ってみましたが、少し調べましたが、何でも、誰でも私を助けてください。

import {Component, trigger, state, animate, transition, style} from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    styles: [` 
    .container { 
     background-color: white; 
     border: 10px solid black; 
     width: 200px; 
     text-align: center; 
     font-size: 50px; 
     box-sizing: border-box; 
     overflow: hidden; 
    } 
    `], 
    animations: [ 
    trigger('openClose', [ 
     state('collapsed', style({ height: '0px', color: 'red' })), 
     state('expanded', style({ height: '100px', color: 'lightgreen' })), 
     transition('expanded <=> collapsed', animate(500)) 
    ]) 
    ], 
    template: ` 
    <button (click)="expand()">Expand</button> 
    <button (click)="collapse()">Collapse</button> 
    <hr /> 
    <div class="container" [@openClose]="animationState"> 
     Look at this box 
    </div> 
    ` 
}) 
export class AppComponent { 
    animationState: string; 

    constructor() { 
    this.collapse(); 
    } 

    expand() { 
    this.animationState = 'expanded'; 
    } 

    collapse() { 
    this.animationState = 'collapsed'; 
    } 
} 

Answer 1

docs角度アニメーションから：

角度アニメーションは、標準的なWebアニメーションAPIの上に構築し、それをサポートするブラウザ上でネイティブに実行されています。 他のブラウザでは、ポリフィルが必要です。 GitHubからweb-animations.min.jsを取得してページに追加してください。 （サファリを含む）他のすべてのブラウザダウンロードとpolyfill

角度でポリフィルをインストールする方法については、[編集] this answerを参照してくださいインストールするためhttp://caniuse.com/#feat=web-animation

：

あなたはここでそれをサポートするブラウザを確認することができます