0
je tente d'ajouter une animation dans le modèle de l'enfant:animation angulaire 2
<div class="panel panel-default" [@AnimationState]="item.animateState" (click)="toggleAnimateState()">
la fonction toggleAnimateState() dans item.component.ts:
toggleAnimateState() {
this.item.animateState = this.item.animateState === 'inactive' ? 'active' : 'inactive';
}
Et dans le même composant:
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;
}
et dans les app.componet.html:
<div *ngFor="let item of collection | itemFilter:listFilter.value" >
<item [item]="item" (onGetDetails)="onGetDetails($event)"></item>
</div>
mais je reçois cette erreur:
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"): [email protected]:35
Si vous utilisez RC4 Angular2 la syntaxe correcte est '@ AnimationState =" item.animateState "' –
merci @DEVON ça marche avant que la page ne soit pas loadin maintenant elle se charge mais quand onclik l'animation est exécutée je reçois cette erreur: originalException : TypeError: Echec de l'exécution de 'animate' sur 'Element': 'eas-in' n'est pas une valeur valide pour faciliter l'utilisation de WebAnimationsDriver._t riggerWebAnimation Je remplace eas-in avec facilité maintenant il fonctionne. – MedKostali
Allez-y, répondez à la question. –