角2.1.0過渡（）不工作

Question

我正在嘗試添加動畫到我的角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並將其添加到您的頁面。

您可以看到，這裏支持的瀏覽器：http://caniuse.com/#feat=web-animation

對於所有其他瀏覽器（包括Safari）下載並安裝polyfill

[編輯]如何在角安裝填充工具看this answer