fix($animate): clear class animations cache if animation is not started

Closes #12604
Closes #12603

Author: matsko

src/ngAnimate/animate.js

@@ -1194,10 +1194,19 @@ angular.module('ngAnimate', ['ng'])
           }
 
           return cache.promise = runAnimationPostDigest(function(done) {
-            var parentNode, parentElement, elementNode = extractElementNode(element);
+            var cache, parentNode, parentElement, elementNode = extractElementNode(element);
+            var DOM_FRAGMENT = 11;
             if (elementNode) {
               parentElement = element.parent();
               parentNode = elementNode.parentNode;
+
+              // we can have an element animate on the document, but not on a fragment
+              if (parentNode && parentNode.nodeType === DOM_FRAGMENT) {
+                parentNode = null;
+              }
+
+              cache = element.data(STORAGE_KEY);
+              element.removeData(STORAGE_KEY);
             }
 
             // TODO(matsko): move this code into the animationsDisabled() function once #8092 is fixed
@@ -1206,9 +1215,6 @@ angular.module('ngAnimate', ['ng'])
               return;
             }
 
-            var cache = element.data(STORAGE_KEY);
-            element.removeData(STORAGE_KEY);
-
             var state = element.data(NG_ANIMATE_STATE) || {};
             var classes = resolveElementClasses(element, cache, state.active);
             return !classes

test/ngAnimate/animateSpec.js

@@ -543,6 +543,42 @@ describe("ngAnimate", function() {
           });
         });
 
+        it("should clear the setClass element animation cache before the next animation runs", function() {
+          var animateSpy = jasmine.createSpy();
+          module(function($animateProvider) {
+            $animateProvider.register('.track-me', function() {
+              return {
+                addClass: animateSpy,
+                removeClass: animateSpy,
+                setClass: animateSpy
+              };
+            });
+          });
+          inject(function($animate, $rootScope, $sniffer, $$rAF) {
+            element[0].removeChild(child[0]);
+
+            var orphanChild = jqLite('<div class="track-me"></div>');
+            var doneSpy = jasmine.createSpy();
+
+            $animate.setClass(orphanChild, 'red', 'blue').then(doneSpy);
+            $rootScope.$digest();
+            $animate.triggerCallbacks();
+
+            expect(doneSpy).toHaveBeenCalled();
+            expect(animateSpy).not.toHaveBeenCalled();
+
+            element.append(orphanChild);
+
+            $animate.setClass(orphanChild, 'blue', 'gold').then(doneSpy);
+            $rootScope.$digest();
+            $animate.triggerReflow();
+            $animate.triggerCallbacks();
+
+            expect(animateSpy).toHaveBeenCalled();
+          });
+        });
+
+
         it("should exclusively animate the setClass animation event with native dom elements", function() {
           var count = 0, fallback = jasmine.createSpy('callback');
           module(function($animateProvider) {
@@ -4558,8 +4594,10 @@ describe("ngAnimate", function() {
           };
         });
       });
-      inject(function($compile, $rootScope, $animate, $sniffer, $rootElement) {
+      inject(function($compile, $rootScope, $animate, $sniffer, $rootElement, $document) {
 
+        var body = jqLite($document[0].body);
+        body.append($rootElement);
         $rootElement.addClass('animated');
         $animate.addClass($rootElement, 'green');
         $rootScope.$digest();
@@ -5417,9 +5455,11 @@ describe("ngAnimate", function() {
     }
 
 
-    it('should defer class manipulation until end of digest', inject(function($rootScope, $animate, log) {
+    it('should defer class manipulation until end of digest', inject(function($rootScope, $animate, log, $document, $rootElement) {
       setupClassManipulationLogger(log);
       element = jqLite('<p>test</p>');
+      jqLite($document[0].body).append($rootElement);
+      $rootElement.append(element);
 
       $rootScope.$apply(function() {
         $animate.addClass(element, 'test-class1');
@@ -5446,9 +5486,11 @@ describe("ngAnimate", function() {
     }));
 
 
-    it('should defer class manipulation until postDigest when outside of digest', inject(function($rootScope, $animate, log) {
+    it('should defer class manipulation until postDigest when outside of digest', inject(function($rootScope, $animate, log, $document, $rootElement) {
       setupClassManipulationLogger(log);
       element = jqLite('<p class="test-class4">test</p>');
+      jqLite($document[0].body).append($rootElement);
+      $rootElement.append(element);
 
       $animate.addClass(element, 'test-class1');
       $animate.removeClass(element, 'test-class1');
@@ -5467,8 +5509,10 @@ describe("ngAnimate", function() {
     }));
 
 
-    it('should perform class manipulation in expected order at end of digest', inject(function($rootScope, $animate, log) {
+    it('should perform class manipulation in expected order at end of digest', inject(function($rootScope, $animate, log, $rootElement, $document) {
       element = jqLite('<p class="test-class3">test</p>');
+      jqLite($document[0].body).append($rootElement);
+      $rootElement.append(element);
 
       setupClassManipulationLogger(log);