orangeeez orangeeez - 14 days ago 5
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"
(@profilemenuState.done)="test()">
</div>


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

Answer

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.

e.g.

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

Hope this helps!