fix($animate): remove ng-animate class after canceling animation

[airato]

ng-animate class gets stuck on element after canceling animation.
Bug example, double click button to catch it
http://plnkr.co/edit/vDQU8sJOKdoluHWdLJvJ?p=preview

Fixes #7766

[caitp]

There's a fix for this already, #7767 --- which identifies and solves the problem differently. I guess the two of you can decide on which is more appropriate.

[airato]

Sorry, my mistake, it doesn't fix #7766. It fixes another problem with similar behavior.

And #7767 doesn't fix this new problem. Here is my example with animate.js from #7767
http://plnkr.co/edit/jojKXMUPpxUCl51rkvO0?p=preview
Dobule click the button. The first click starts animation, the second click cancels the first animation and starts another one. After completion of the second animation we still have an element with ng-animate CSS class.

[caitp]

So your fix isn't actually about 7766, but a different issue. Anyways, work with matsko on getting it checked in

[airato]

Ok, so, @matsko, need you here

[airato]

The problem exists in v1.2.x too, #7801

[matsko]

@airato great work. I'll put together a test for this and we'll merge it into both 1.2 and 1.3.

[matsko]

This just landed. Excellent work @airato.

[matsko]

e18db78

[e-oz]

thank you, @airato :)

[e-oz]

I'm sorry for bumping closed issue, but ng-animate class still staying for (approx.) 5 seconds after animation event (ng-hide in my case). Sorry, I don't have enough time to build emulation in jsFiddle, but you can see recorded video of screen, where you can see this bug:
https://dl.dropboxusercontent.com/u/63808427/ngAnimate.mov
ng-animate should be removed when green notification appears (button also becomes enabled), it's almost instantly after pressing button.

[matsko]

@Jamm I don't see the green notification that you're talking about. Are you running an infinite animation? ngAnimate implicitly converts it down to a single iteration.

I would be best if you could put together a JS Fiddle for this.

[e-oz]

@matsko in top right corner. No, I don't run any animations, it triggers on ng-show/ng-hide. I'll create fiddle today.

[e-oz]

sorry, bug was caused by interoperation with fa-spin from fontAwesome. For future readers: don't use ng-show and fa-spin in one node :)

[matsko]

Inifinite keyframe transitions don't work well with ngAnimate. The solution for that is to go something like this:

.fa.ng-animate { transition:0s none;
       -webkit-transition:0s none;
       animation: 0s none;
       -webkit-animation: 0s none; }

So that the styling won't mix. Don't worry the animation will still run otherwise just not with any intervention from ngAnimate.

P.S. If that doesn't work then you may need to use !important.