animation in angular 2

Question

I try to add an animation in child template:

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

the function toggleAnimateState() in item.component.ts:

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

And in the same component :

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;
}

ANd in the app.componet.html:

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

    </div>

But i get this error :

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

If you are using RC4 Angular2 the correct syntax is `@AnimationState="item.animateState"` — Devon Germano, Mar 24 '17 at 04:18
thank you @DEVON it is working before the page is not loadin now it'is loading but when onclik the animation is execute I get this error:originalException : TypeError: Failed to execute 'animate' on 'Element': 'eas-in' is not a valid value for easing at WebAnimationsDriver._triggerWebAnimation I replace eas-in with ease now itis working. — MedKostali, Mar 24 '17 at 10:33

score 0 · Accepted Answer · answered Mar 24 '17 at 13:38

0

If you are using RC4 Angular2 the correct syntax is @AnimationState="item.animateState"

answered Mar 24 '17 at 13:38

Devon Germano

171
12

animation in angular 2

1 Answers1