fix($animate): ensure that class-based animations only consider the most recent DOM operations

Prior to this fix $animate would maintain a count of each time a class was
added and removed within $animate. With this fix, $animate instead only cares
about the class times that the classes were added and/or removed.

Closes angular#8946

Author: matsko

src/ngAnimate/animate.js

@@ -471,18 +471,13 @@ angular.module('ngAnimate', ['ng'])
         runningAnimations = runningAnimations || {};
         var map = {};
 
-        forEach(cache.add, function(className) {
-          if (className && className.length) {
-            map[className] = map[className] || 0;
-            map[className]++;
-          }
-        });
-
-        forEach(cache.remove, function(className) {
-          if (className && className.length) {
-            map[className] = map[className] || 0;
-            map[className]--;
-          }
+        forEach(cache.classes, function(val) {
+          var polarity = val.charAt(0);
+          var className = val.substr(1);
+          var count = map[className] = map[className] || 0;
+          map[className] = polarity == '+'
+            ? Math.min(count + 1, 1)
+            : Math.max(count - 1, -1);
         });
 
         var lookup = [];
@@ -997,20 +992,28 @@ angular.module('ngAnimate', ['ng'])
             return $delegate.setClass(element, add, remove);
           }
 
+          // we're using a combined array for both the add and remove
+          // operations since the ORDER OF addClass and removeClass matters
+          var classes = [];
           add = isArray(add) ? add : add.split(' ');
+          forEach(add, function(c) {
+            c && c.length && classes.push('+' + c);
+          });
+
           remove = isArray(remove) ? remove : remove.split(' ');
+          forEach(remove, function(c) {
+            c && c.length && classes.push('-' + c);
+          });
 
           var cache = element.data(STORAGE_KEY);
           if (cache) {
-            cache.add = cache.add.concat(add);
-            cache.remove = cache.remove.concat(remove);
+            cache.classes = cache.classes.concat(classes);
 
             //the digest cycle will combine all the animations into one function
             return cache.promise;
           } else {
             element.data(STORAGE_KEY, cache = {
-              add : add,
-              remove : remove
+              classes : classes
             });
           }
 

test/ngAnimate/animateSpec.js

@@ -3413,6 +3413,71 @@ describe("ngAnimate", function() {
       });
     });
 
+    it('should intelligently cancel out redundant class-based animations', function() {
+      var log = [];
+      var track = function(name) {
+        return function() {
+          log.push({ name : name, className : arguments[1] });
+        };
+      };
+      module(function($animateProvider) {
+        $animateProvider.register('.animate', function() {
+          return {
+            addClass    : track('addClass'),
+            removeClass : track('removeClass')
+          };
+        });
+      });
+      inject(function($rootScope, $animate, $compile, $rootElement, $document) {
+        $animate.enabled(true);
+
+        var element = $compile('<div class="animate three four"></div>')($rootScope);
+        $rootElement.append(element);
+        angular.element($document[0].body).append($rootElement);
+
+        $animate.removeClass(element, 'one');
+        $rootScope.$digest();
+        $animate.triggerReflow();
+        expect(log.length).toBe(0);
+        $animate.triggerCallbacks();
+
+        $animate.addClass(element, 'two');
+        $animate.addClass(element, 'two');
+        $animate.removeClass(element, 'two');
+        $rootScope.$digest();
+        $animate.triggerReflow();
+        expect(log.length).toBe(0);
+        $animate.triggerCallbacks();
+
+        $animate.removeClass(element, 'three');
+        $animate.addClass(element, 'three');
+        $rootScope.$digest();
+        $animate.triggerReflow();
+        expect(log.length).toBe(0);
+        $animate.triggerCallbacks();
+
+        $animate.removeClass(element, 'four');
+        $animate.addClass(element, 'four');
+        $animate.removeClass(element, 'four');
+        $rootScope.$digest();
+        $animate.triggerReflow();
+        expect(log.length).toBe(1);
+        $animate.triggerCallbacks();
+        expect(log[0]).toEqual({ name : 'removeClass', className : 'four' });
+
+        $animate.addClass(element, 'five');
+        $animate.addClass(element, 'five');
+        $animate.addClass(element, 'five');
+        $animate.removeClass(element, 'five');
+        $animate.addClass(element, 'five');
+        $rootScope.$digest();
+        $animate.triggerReflow();
+        expect(log.length).toBe(2);
+        $animate.triggerCallbacks();
+        expect(log[1]).toEqual({ name : 'addClass', className : 'five' });
+      });
+    });
+
     it('should skip class-based animations if the element is removed before the digest occurs', function() {
       var spy = jasmine.createSpy();
       module(function($animateProvider) {