fix(ngAnimate): ensure that orphaned elements do not throw errors when animated

This fix ensures that for both `$animateCss` and `$animate` capture the error
when a class-based animation takes place where the element is removed from the
parent element sometime before or during the preparation stages the
animation.

Closes angular#11975

Author: matsko

src/ngAnimate/animateCss.js

@@ -497,6 +497,10 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
 
     function init(element, options) {
       var node = getDomNode(element);
+      if (!node || !node.parentNode) {
+        return closeAndReturnNoopAnimator();
+      }
+
       options = prepareAnimationOptions(options);
 
       var temporaryStyles = [];
@@ -782,6 +786,10 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
 
       function start() {
         if (animationClosed) return;
+        if (!node.parentNode) {
+          close();
+          return;
+        }
 
         var startTime, events = [];
 

test/ngAnimate/animateCssSpec.js

@@ -51,6 +51,43 @@ describe("ngAnimate $animateCss", function() {
   describe('when active', function() {
     if (!browserSupportsCssAnimations()) return;
 
+    it("should silently quit the animation and not throw when an element is not attached to a parent during preparation",
+      inject(function($animateCss, $$rAF, $rootScope, $document, $rootElement) {
+
+      var element = jqLite('<div></div>');
+      expect(function() {
+        $animateCss(element, {
+          duration: 1000,
+          event: 'fake',
+          to: fakeStyle
+        }).start();
+      }).not.toThrow();
+
+      expect(element).not.toHaveClass('fake');
+      triggerAnimationStartFrame();
+      expect(element).not.toHaveClass('fake-active');
+    }));
+
+    it("should silently quit the animation and not throw when an element is not attached to a parent before starting",
+      inject(function($animateCss, $$rAF, $rootScope, $document, $rootElement) {
+
+      var element = jqLite('<div></div>');
+      jqLite($document[0].body).append($rootElement);
+      $rootElement.append(element);
+
+      $animateCss(element, {
+        duration: 1000,
+        addClass: 'wait-for-it',
+        to: fakeStyle
+      }).start();
+
+      element.remove();
+
+      expect(function() {
+        triggerAnimationStartFrame();
+      }).not.toThrow();
+    }));
+
     describe("rAF usage", function() {
       it("should buffer all requests into a single requestAnimationFrame call",
         inject(function($animateCss, $$rAF, $rootScope, $document, $rootElement) {

test/ngAnimate/integrationSpec.js

@@ -105,6 +105,33 @@ describe('ngAnimate integration tests', function() {
         expect(animationCompleted).toBe(true);
       });
     });
+
+    it('should not throw an error if the element is orphaned before the CSS animation starts',
+      inject(function($rootScope, $rootElement, $animate, $$rAF) {
+
+      ss.addRule('.animate-me', 'transition:2s linear all;');
+
+      var parent = jqLite('<div></div>');
+      html(parent);
+
+      var element = jqLite('<div class="animate-me">DOING</div>');
+      parent.append(element);
+
+      $animate.addClass(parent, 'on');
+      $animate.addClass(element, 'on');
+      $rootScope.$digest();
+
+      // this will run the first class-based animation
+      $$rAF.flush();
+
+      element.remove();
+
+      expect(function() {
+        $$rAF.flush();
+      }).not.toThrow();
+
+      dealoc(element);
+    }));
   });
 
   describe('JS animations', function() {