CODEWITHSUNDEEP
angularangular-animations
Marcus Riemer
Marcus Riemer

Reputation: 7728

Stop all running animations when a new transition occurs?

I have a set of elements where I want to highlight elements that are currently executed or have previously been executed. This is far easier to understand when seen in action, so here we go:

Highlighted execution]

This "fading" behavior is achieved with the following animation:

trigger('isExecuted', [
  state('false', style({ "background": "white" })),
  state('true', style({ "background": "lime" })),
  transition('false => true', animate(0)),
  transition('true => false', animate(1000))
]),

It immediately animates to the "full" lime colour when going from false to true and slowly fades out when going the other way.

Sadly this behaves incorrectly when the same execution block is being executed again while still fading out. If you watched the video above closely, you might have gotten a glimpse at a state where the little cog is turning on goForward() or wait() but the block was not coloured green. If I remove the wait() block in the code, the problem becomes much more obvious: Many iterations do show the cog (= are being executed) but are not colored.

No waiting, loads of cogs without green

I guess this is because Angular wants to properly finish the previous animation (which is still fading out). Is there a way to tell Angular to only use the most recent animation at any time?

Upvotes: 1

Views: 387

Answers (1)

Marcus Riemer
Marcus Riemer

Reputation: 7728

I solved my problem by accident: It seems that stating animate(0) triggers the (for me unwanted) behavior of applying the animation only after the other animation has finished. During some refactoring I (by accident) simply did not state a transition for false => true (which I refactored to neutral => executed) at all and suddenly the application of the style became instant.

trigger('background', [
  state('neutral', style({ "background": "white" })),
  state('executed', style({ "background": "lime" })),
  transition('executed => neutral', animate('2000ms)'))
])

Working execution tracing

Upvotes: 2

Related Questions