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

Closes angular#7784
Closes angular#7801
Closes angular#7872

Author: airato

src/ngAnimate/animate.js

@@ -921,10 +921,9 @@ angular.module('ngAnimate', ['ng'])
               //cancel all animations when a structural animation takes place
               for(var klass in runningAnimations) {
                 animationsToCancel.push(runningAnimations[klass]);
-                cleanup(element, klass);
               }
-              runningAnimations = {};
-              totalActiveAnimations = 0;
+              ngAnimateState = {};
+              cleanup(element, true);
             }
           } else if(lastAnimation.event == 'setClass') {
             animationsToCancel.push(lastAnimation);
@@ -947,6 +946,9 @@ angular.module('ngAnimate', ['ng'])
           }
         }
 
+        runningAnimations     = ngAnimateState.active || {};
+        totalActiveAnimations = ngAnimateState.totalActive || 0;
+
         if(runner.isClassBased && !runner.isSetClassOperation && !skipAnimation) {
           skipAnimation = (animationEvent == 'addClass') == element.hasClass(className); //opposite of XOR
         }

test/ngAnimate/animateSpec.js

@@ -690,6 +690,46 @@ describe("ngAnimate", function() {
           expect(child.hasClass('animation-cancelled')).toBe(true);
         }));
 
+        it("should remove the .ng-animate className after a former animation was cancelled and then after the follow-up class-based animation has completed", function() {
+          var addClassDone, removeClassDone,
+              addClassDoneSpy = jasmine.createSpy(),
+              removeClassDoneSpy = jasmine.createSpy();
+
+          module(function($animateProvider) {
+            $animateProvider.register('.hide', function() {
+              return {
+                addClass : function(element, className, done) {
+                  addClassDone = done;
+                  return addClassDoneSpy;
+                },
+                removeClass : function(element, className, done) {
+                  removeClassDone = done;
+                  return removeClassDoneSpy;
+                }
+              };
+            });
+          });
+
+          inject(function($animate, $rootScope, $sniffer, $timeout) {
+            $animate.addClass(element, 'hide');
+
+            expect(element).toHaveClass('ng-animate');
+
+            $animate.triggerReflow();
+
+            $animate.removeClass(element, 'hide');
+            expect(addClassDoneSpy).toHaveBeenCalled();
+
+            $animate.triggerReflow();
+
+            expect(element).toHaveClass('ng-animate');
+
+            removeClassDone();
+            $animate.triggerCallbacks();
+
+            expect(element).not.toHaveClass('ng-animate');
+          });
+        });
 
         it("should skip a class-based animation if the same element already has an ongoing structural animation",
           inject(function($animate, $rootScope, $sniffer, $timeout) {