angular 2中的动画

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

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

在同一组件中：

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

异常：模板分析错误：
无法绑定到“@AnimationState”，因为它不是已知的本机属性（“
][@AnimationState]=“item.AnimationState”（单击）=“toggleAnimateState（）”>
如果您使用的是RC4 Angular2，正确的语法是
@AnimationState=“item.animateState”
如果您使用的是RC4 Angular2，正确的语法是
@AnimationState=“item.animateState”"
thank you@DEVON它在页面未加载之前工作，现在正在加载，但一旦喜欢动画执行，我会收到以下错误：originalException:TypeError:未能在“元素”上执行“animate”：“eas in”不是WebAnimationDriver的有效值。\u triggerWebAnimation我用ease替换ease in现在正在工作。Il我继续回答这个问题。
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