CODEWITHSUNDEEP
angularangular2-animation
HirenParekh
HirenParekh

Reputation: 3735

Angular : Animation complete callback

I know about (@myTrigger.done) event, but it fires every time even if the animation is interrupted and not completed.

I want to create a sequence of animations for one popup component where the popup slides from the right side of the window and after that the close button pops up. the popup can also be closed by Esc key.

I am using the @myTrigger.done trigger event to check if animation is finished of not. but if I press Esc key when the popup is sliding it emits the done event the emits the done event for the slideIn animation and the close button pops up even though the slide animation was not completed.

here is the plunker demo of my popup. you can see that when it is opening if i click on backdrop or press Esc key the close button pops up which should not pop up if the sliding animation was interrupted.

so is there any way to check if animation was completed or interrupted ?

Upvotes: 0

Views: 985

Answers (1)

karser
karser

Reputation: 1683

It looks like angular/animations doesn't have any events besides start/done. Although, you might save the start time and then calculate the elapsed time:

  started: number;
  popupStateChanging(event: AnimationEvent) {
    this.started = (new Date()).getTime();
    ///
  }    
  popupStateChanged(event: AnimationEvent) {
    const now = (new Date()).getTime();
    console.log(`${event.fromState}->${event.toState}: expected: ${event.totalTime}, actual:`, now - this.started);
    ///
  }

This code sample will produce this output:

void->active: expected: 350, actual: 176 <--interruped
active->inactive: expected: 350, actual: 351
void->active: expected: 350, actual: 38  <--- interrupted
active->inactive: expected: 350, actual: 353

The live demo https://plnkr.co/edit/aGhGqHcYAU5wVsQWqAuB?p=preview

Upvotes: 1

Related Questions