orangeeez orangeeez - 2 months ago 29
Javascript Question

Angular 2 animation first init

I have an component animation here:

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'))

and html template like:

<div [@profilemenuState]="state"

The question is why event
is firing in initial loading, before
will be toggled?


The event is fired every time the profileState-trigger has changed to one of its states. If your state variable contains "deselected" as initial state, (done) is fired because of the transition from void => deselected.

If you want to differentiate between the different states within the test() method you can change it to test($event) and you get an argument of type AnimationTransitionEvent injected into the method. There you get some information about the current state.


test(event: AnimationTransitionEvent) {

Hope this helps!