ng-animate skips animation "under pressure"

[chrisguttandin]

I created a simple fiddle to explain my problem: https://jsfiddle.net/akpr3jej/1/. It does no more than changing a dynamic class when clicked on one of the buttons. Changing this class triggers an animation. If you do that a number of times very fast, there will be no animation anymore and the colors are switched abrupt from one to the other.

I could reproduce this behavior in Chrome, Opera and Safari. But it seems to be working in Firefox.

[matsko]

Alright I see what's going on here.

Once #12248 is in I will have a go at this. We should get this fixed by next week.

[chrisguttandin]

Many thanks for looking into this @matsko.

[matsko]

Alright so #12248 is fine, but it looks like the issue at hand is something else. I'll spend time today looking into it. My guess is that it has something do with this $timeout value leaking into follow-up animations: https://github.com/angular/angular.js/blob/master/src/ngAnimate/animateCss.js#L762

[matsko]

Alright good sir here is a fixed build of ngAnimate. It takes care of the issue you're experiencing: http://plnkr.co/edit/P7E5CXnuMQDpH1SiJ0pj?p=preview

[matsko]

Alright and we have a PR ready to be merged in: https://github.com/angular/angular.js/pull/12490

[chrisguttandin]

Many many thanks for fixing this.

[matsko]

The fix for this has landed in master: https://github.com/angular/angular.js/commit/d88167318d1c69f0dbd2101c05955eb450c34fd5

Once 1.4.5 is released then you can use it there or you can grab the snapshot: http://code.angularjs.org/snapshot.

[bmmpt]

Hi matsko,

I have a similar issue to the one reported here. Before I decided to post my issue here I tried the plunker you pointed out as fixing the issue at hand: http://plnkr.co/edit/P7E5CXnuMQDpH1SiJ0pj?p=preview

It appears to me that the issue is still there when you repeatedly press the buttons randomly.

I believe my scenario is simpler and illustrates a similar problem:

http://plnkr.co/edit/YzxCThylPk4AfX0cvcfG

If you click the button to hide the label and wait for the animation to finish and then click it to show the label and wait until it finishes, all goes well. But when the animation is half way down and you click the button I would expect the label to go back up, and apparently it's happening but if you continue clicking the button, you will notice it "jumps" rather than "sliding".

Thanks in advance.