fix(ngAnimate): close follow-up class-based animations when the same class is added/removed when removed/added

This patch ensures that if the same CSS class is added/removed within a
follow-up digest then the previous class-based animation is cancelled
beforehand.

Closes angular#11717

Author: matsko

src/ngAnimate/animateQueue.js

@@ -58,6 +58,14 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
     return currentAnimation.state === RUNNING_STATE && newAnimation.structural;
   });
 
+  rules.cancel.push(function(element, newAnimation, currentAnimation) {
+    var nO = newAnimation.options;
+    var cO = currentAnimation.options;
+
+    // if the exact same CSS class is added/removed then it's safe to cancel it
+    return (nO.addClass && nO.addClass === cO.removeClass) || (nO.removeClass && nO.removeClass === cO.addClass);
+  });
+
   this.$get = ['$$rAF', '$rootScope', '$rootElement', '$document', '$$HashMap',
                '$$animation', '$$AnimateRunner', '$templateRequest', '$$jqLite',
        function($$rAF,   $rootScope,   $rootElement,   $document,   $$HashMap,
@@ -358,6 +366,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
 
       if (!isValidAnimation) {
         close();
+        clearElementAnimationState(element);
         return runner;
       }
 

test/ngAnimate/animateSpec.js

@@ -976,6 +976,47 @@ describe("animations", function() {
         expect(enterDone).toHaveBeenCalled();
       }));
 
+      it('should cancel the previously running addClass animation if a follow-up removeClass animation is using the same class value',
+        inject(function($animate, $rootScope, $$rAF) {
+
+        parent.append(element);
+        var runner = $animate.addClass(element, 'active-class');
+        $rootScope.$digest();
+
+        var doneHandler = jasmine.createSpy('addClass done');
+        runner.done(doneHandler);
+
+        $$rAF.flush();
+
+        expect(doneHandler).not.toHaveBeenCalled();
+
+        $animate.removeClass(element, 'active-class');
+        $rootScope.$digest();
+
+        expect(doneHandler).toHaveBeenCalled();
+      }));
+
+      it('should cancel the previously running removeClass animation if a follow-up addClass animation is using the same class value',
+        inject(function($animate, $rootScope, $$rAF) {
+
+        element.addClass('active-class');
+        parent.append(element);
+        var runner = $animate.removeClass(element, 'active-class');
+        $rootScope.$digest();
+
+        var doneHandler = jasmine.createSpy('addClass done');
+        runner.done(doneHandler);
+
+        $$rAF.flush();
+
+        expect(doneHandler).not.toHaveBeenCalled();
+
+        $animate.addClass(element, 'active-class');
+        $rootScope.$digest();
+
+        expect(doneHandler).toHaveBeenCalled();
+      }));
+
       it('should skip the class-based animation entirely if there is an active structural animation',
         inject(function($animate, $rootScope) {