Angular 2 Animation init erste

Question

Ich habe eine Komponente Animation hier:

animations: [ 
    trigger('profilemenuState', [ 
     state('deselected', style({ 
      width: '8.3%' 
     })), 
     state('selected', style({ 
      width: '30%' 
     })), 
     transition('deselected => selected', animate('500ms ease-in')), 
     transition('selected => deselected', animate('500ms ease-out')) 
    ]) 
] 

und HTML-Vorlage wie:

<div [@profilemenuState]="state" 
    (@profilemenuState.done)="test()"> 
</div> 

Die Frage ist, warum Ereignis done wird in der ersten Belastung abfeuern, bevor state sein umgeschaltet?

Answer 1

Das Ereignis wird jedes Mal ausgelöst, wenn der profileState-Trigger in einen seiner Zustände geändert wurde. Wenn Ihre state Variable "deselected" als Ausgangszustand enthält, wird (done) aufgrund des Übergangs von void => deselected ausgelöst.

Wenn Sie zwischen den verschiedenen Zuständen innerhalb der test() Methode unterscheiden möchten, können Sie es in test($event) ändern und Sie erhalten ein Argument vom Typ AnimationTransitionEvent in die Methode injiziert. Dort erhalten Sie Informationen über den aktuellen Stand.

z.B.

test(event: AnimationTransitionEvent) { 
    console.log(event.toState); 
} 

Hoffe, das hilft!