filipows / angular-animations

:sparkles: Easy, Reusable Animation Utility library for Angular
https://filipows.github.io/angular-animations
MIT License
634 stars 89 forks source link

Animation callbacks get called even tho they didnt run #133

Open MickL opened 1 year ago

MickL commented 1 year ago

When having a leave animation the start and end animation

Template: <div *ngIf="isVisible" [@fadeOutOnLeave] (@fadeOutOnLeave.done)="animDone($event)"></div>

Component:

//...

isVisible = false;

ngOnInit() {
  setTimeout(() => { this.isVisble = true; }, 5000);
  setTimeout(() => { this.isVisble = false; }, 10000);
}

animDone(event: AnimationEvent) {
  console.log('Animation Ended', event);
}

I would assume that animDone() does only gets called after the div has been faded-out. Instead animDone gets called on init already:

fromState: "void"
phaseName: "done"
toState: null
totalTime: 0
MickL commented 1 year ago

Still the same issue unfortunately, is this project still maintained?

Workaround:

animDone(event: AnimationEvent) {
   if (event.toState === 'void') {
      console.log('Animation Ended', event);
   }
}