Estoy tratando de detectar cuándo finaliza una animación para poder ejecutar algo después, mi investigación me ha llevado a @animation.done y @animation.start pero parece dispararse al principio, independientemente de si mi animación está terminada.
Consolé un mensaje en mi función @animation.done y se activa al principio, incluso antes de que ocurra la animación, creo.
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); }Si observa el objeto AnimationEvent pasado a su método animationDone() , verá que el método se llama dos veces: una vez para pasar del estado 'void' al estado 'out' , luego una segunda vez para pasar del estado 'out' para decir 'in' :
Llamada #1 evento:
{ "element": {}, "triggerName": "fadeInUpViewProject", "fromState": "void", <---------------- "toState": "out", <------------------- "phaseName": "done", "totalTime": 0, "disabled": false, "_data": 1 }Llamada #2 evento:
{ "element": {}, "triggerName": "fadeInUpViewProject", "fromState": "out", <----------------- "toState": "in", <-------------------- "phaseName": "done", "totalTime": 2000, "disabled": false, "_data": 3 } El segundo evento es el que ocurre cuando la animación de toState realmente se completa (porque alcanzó su state final de 'in' ), por lo que en su método animationDone() , puede verificar el estado del objeto de evento pasado. propiedad está 'in' , entonces sabes que tu animación está completa.