angular 2 中的动画

Question

我尝试在子模板中添加动画：

<div class="panel panel-default" [@AnimationState]="item.animateState" (click)="toggleAnimateState()">

item.component.ts中的函数 toggleAnimateState():

 toggleAnimateState() {
   this.item.animateState = this.item.animateState === 'inactive' ? 'active' : 'inactive'; 
}

并且在同一个组件中：

import { Component, Input ,Output, EventEmitter, trigger, state, style, transition, animate } from "@angular/core";
import { Item as ItemModel} from "./models/Item";

@Component({
    selector: 'item',
    templateUrl: 'app/item.component.html' ,
    styleUrls : ['app/app.component.css'],
    animations : [
      trigger('AnimationState',[
        state('inactive', style({color:'red'})),
        state('active', style({color: 'blue'})),
        transition('inactive => active' , animate('1000ms eas-in')),
        transition('active => inactive' , animate('5000ms eas-in')),
      ])
    ]
  })
  export class Item {
@Input() item : ItemModel;
}

并在 app.componet.html 中：

<div *ngFor="let item of collection | itemFilter:listFilter.value" >
        <item [item]="item" (onGetDetails)="onGetDetails($event)"></item>

    </div>

但是我得到这个错误：

EXCEPTION: Template parse errors:
Can't bind to '@AnimationState' since it isn't a known native property (" 

  <div class="panel panel-default" [ERROR ->][@AnimationState]="item.animateState" (click)="toggleAnimateState()">

    <div class="panel-he"): Item@2:35

Answer 1

如果您使用的是 RC4 Angular2，正确的语法是 @AnimationState="item.animateState"

angular 2 中的动画

animation in angular 2

angular

angular-animations