I am trying to detect when an animation finishes so that I can execute something afterwards, my research has led me the @animation.done and @animation.start but it seems to fire in the beginning regardless of if my animation is finished.
I consolelog'd a message in my @animation.done function and it fires in the beginning even before the animation happens I believe
https://stackblitz.com/edit/angular-vtuydu?file=src/app/app.component.ts
HTML:
<button
type="button"
class="button-viewproject"
[@fadeInUpViewProject]="viewProjectState ? 'in' : 'out'"
(@fadeInUpViewProject.done)="animationDone($event)"
>
View Me
</button>
TS:
animationDone(event: any) {
console.log(this.viewProjectState); // alert('hey'); Seems to execute no matter what
// alert('hey'); Seems to execute no matter what
setTimeout(() => {}, 1900);
}
If you look at the AnimationEvent object passed into your animationDone() method, you'll see that the method gets called twice: once for going from state 'void' to state 'out', then a second time for going from state 'out' to state 'in':
Call #1 event:
{
"element": {},
"triggerName": "fadeInUpViewProject",
"fromState": "void", <----------------
"toState": "out", <-------------------
"phaseName": "done",
"totalTime": 0,
"disabled": false,
"_data": 1
}
Call #2 event:
{
"element": {},
"triggerName": "fadeInUpViewProject",
"fromState": "out", <-----------------
"toState": "in", <--------------------
"phaseName": "done",
"totalTime": 2000,
"disabled": false,
"_data": 3
}
The 2nd event is the one that occurs when your fade-in-up animation actually completes (because it's reached your final state of 'in'), so in your animationDone() method, you can just check the passed-in event object's toState property being 'in', then you know your animation is complete.