fix($animate): ensure former nodes are fully cleaned up when a follow-up structural animation takes place

Closes angular#4435

Author: matsko

src/ngAnimate/animate.js

@@ -588,6 +588,7 @@ angular.module('ngAnimate', ['ng'])
           //if an animation is currently running on the element then lets take the steps
           //to cancel that animation and fire any required callbacks
           $timeout.cancel(ngAnimateState.flagTimer);
+          cleanup(element);
           cancelAnimations(ngAnimateState.animations);
           (ngAnimateState.done || noop)();
         }
@@ -700,25 +701,24 @@ angular.module('ngAnimate', ['ng'])
           return rootAnimateState.disabled || rootAnimateState.running;
         }
 
-        var validState;
         do {
           //the element did not reach the root element which means that it
           //is not apart of the DOM. Therefore there is no reason to do
           //any animations on it
-          if(parent.length === 0) return true;
+          if(parent.length === 0) break;
 
           var isRoot = parent[0] == $rootElement[0];
           var state = isRoot ? rootAnimateState : parent.data(NG_ANIMATE_STATE);
-          if(state && (state.disabled != null || state.running != null)) {
-            validState = state;
-            break;
+          var result = state && (!!state.disabled || !!state.running);
+          if(isRoot || result) {
+            return result;
           }
 
           if(isRoot) return true;
         }
         while(parent = parent.parent());
 
-        return validState ? (validState.disabled || validState.running) : true;
+        return true;
       }
     }]);
 

test/ngAnimate/animateSpec.js

@@ -1817,6 +1817,42 @@ describe("ngAnimate", function() {
 //      expect(element.hasClass('hiding')).toBe(false);
 //    });
 //  });
+  it("should remove all the previous classes when the next animation is applied before a reflow", function() {
+    var fn, interceptedClass;
+    module(function($animateProvider) {
+      $animateProvider.register('.three', function() {
+        return {
+          move : function(element, done) {
+            fn = function() {
+              done();
+            }
+            return function() {
+              interceptedClass = element.attr('class');
+            }
+          }
+        }
+      });
+    });
+    inject(function($compile, $rootScope, $animate, $timeout) {
+      var parent = html($compile('<div class="parent"></div>')($rootScope));
+      var one = $compile('<div class="one"></div>')($rootScope);
+      var two = $compile('<div class="two"></div>')($rootScope);
+      var three = $compile('<div class="three klass"></div>')($rootScope);
+
+      parent.append(one);
+      parent.append(two);
+      parent.append(three);
+
+      $animate.move(three, null, two);
+      $rootScope.$digest();
+
+      $animate.move(three, null, one);
+      $rootScope.$digest();
+
+      //this means that the former animation was cleaned up before the new one starts
+      expect(interceptedClass.indexOf('ng-animate') >= 0).toBe(false);
+    });
+  });
 
   it("should provide the correct CSS class to the addClass and removeClass callbacks within a JS animation", function() {
     module(function($animateProvider) {