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

从angular Animations docs：

Angular动画建立在标准的Web animations API之上，并在支持它的浏览器上本地运行。对于其他浏览器，需要polyfill。从GitHub获取web-animations.min.js并将其添加到您的页面。

你可以在这里看到支持它的浏览器：http://caniuse.com/#feat=web-animation

对于所有其他浏览器(包括Safari)，请下载并安装polyfill

editOn如何在angular中安装polyfill请参阅this answer