fix(ngAnimate): run structural animations with cancelled out class changes

When multiple animations on the same element are queued before a $digest passes,
the animator tries to create as few actual animations as possible by joining / canceling
redundant animations. Class-based animations for example are cancelled when the classes that
are added and removed are the same, and the result is no class-change. This however must only
happen if there's no structural animation currently queued.

Fixes angular#14249

Author: Narretz

src/ngAnimate/animateQueue.js

@@ -82,6 +82,11 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
   });
 
   rules.cancel.push(function(element, newAnimation, currentAnimation) {
+    // cancel the animation if classes added / removed in both animation cancel each other out,
+    // but only if the current animation isn't structural
+
+    if (currentAnimation.structural) return false;
+
     var nA = newAnimation.addClass;
     var nR = newAnimation.removeClass;
     var cA = currentAnimation.addClass;

test/ngAnimate/animateSpec.js

@@ -1104,7 +1104,8 @@ describe("animations", function() {
         $animate.removeClass(element, 'active-class');
         $rootScope.$digest();
 
-        expect(doneHandler).toHaveBeenCalled();
+        // true = rejected
+        expect(doneHandler).toHaveBeenCalledWith(true);
       }));
 
       it('should cancel the previously running removeClass animation if a follow-up addClass animation is using the same class value',
@@ -1123,7 +1124,8 @@ describe("animations", function() {
         $animate.addClass(element, 'active-class');
         $rootScope.$digest();
 
-        expect(doneHandler).toHaveBeenCalled();
+        // true = rejected
+        expect(doneHandler).toHaveBeenCalledWith(true);
       }));
 
       it('should merge a follow-up animation that does not add classes into the previous animation (pre-digest)',
@@ -1198,6 +1200,28 @@ describe("animations", function() {
 
         expect(capturedAnimation[2].addClass).toBe('blue');
       }));
+
+      it('should NOT cancel a previously joined addClass+structural animation if a follow-up removeClass animation is using the same class value (pre-digest)',
+        inject(function($animate, $rootScope) {
+
+        var runner = $animate.enter(element, parent);
+        $animate.addClass(element, 'active-class');
+
+        var doneHandler = jasmine.createSpy('enter done');
+        runner.done(doneHandler);
+
+        expect(doneHandler).not.toHaveBeenCalled();
+
+        $animate.removeClass(element, 'active-class');
+        $rootScope.$digest();
+
+        expect(capturedAnimation[1]).toBe('enter');
+        expect(capturedAnimation[2].addClass).toBe(null);
+        expect(capturedAnimation[2].removeClass).toBe(null);
+
+        expect(doneHandler).not.toHaveBeenCalledWith(true);
+      }));
+
     });
 
     describe('should merge', function() {

test/ngAnimate/integrationSpec.js

@@ -756,5 +756,31 @@ describe('ngAnimate integration tests', function() {
         expect(child.attr('style')).toContain('50px');
       });
     });
+
+
+    it('should execute the enter animation on a <form> with ngIf that has a <input> of type="email" that is required',
+      inject(function($animate, $rootScope, $compile) {
+        var form;
+
+        ss.addRule('.animate-me.ng-enter', 'transition:2s linear all; opactiy: 0;');
+        ss.addRule('.animate-me.ng-enter-active', 'opacity: 1;');
+
+        element = jqLite('<div><form class="animate-me" ng-if="show"><input ng-model="myModel" type="email" required /></form></div>');
+        html(element);
+
+        $compile(element)($rootScope);
+
+        $rootScope.show = true;
+        $rootScope.$digest();
+        form = element.find('form');
+        expect(form).toHaveClass('ng-enter');
+
+        $animate.flush();
+        expect(form).toHaveClass('ng-enter-active');
+
+        $animate.closeAndFlush();
+        expect(form).not.toHaveClass('ng-enter ng-enter-active');
+      })
+    );
   });
 });