fix(ngAnimate): only trigger animations if the document is not hidden

Prior to this fix, ngAnimate would always trigger animations even if
the browser tab or browser window is not in view. This issue was
important to fix because browsers do not flush calls to
requestAnimationFrame when they are not active.

This fix ensures that ngAnimate will respect `document.hidden` in
order to get around this.

Closes angular#12842

Author: matsko

src/ngAnimate/animateQueue.js

@@ -337,7 +337,8 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
       // this is a hard disable of all animations for the application or on
       // the element itself, therefore  there is no need to continue further
       // past this point if not enabled
-      var skipAnimations = !animationsEnabled || disabledElementsLookup.get(node);
+      var doc = $document[0];
+      var skipAnimations = !animationsEnabled || doc.hidden || disabledElementsLookup.get(node);
       var existingAnimation = (!skipAnimations && activeAnimationsLookup.get(node)) || {};
       var hasExistingAnimation = !!existingAnimation.state;
 

test/ngAnimate/animateSpec.js

@@ -148,6 +148,31 @@ describe("animations", function() {
       expect(copiedOptions).toEqual(initialOptions);
     }));
 
+    it("should skip animations entirely if the document is not active", function() {
+      var doc;
+
+      module(function($provide) {
+        doc = jqLite({
+          body: document.body,
+          hidden: true
+        });
+        $provide.value('$document', doc);
+      });
+
+      inject(function($animate, $rootScope) {
+        $animate.enter(element, parent);
+        $rootScope.$digest();
+        expect(capturedAnimation).toBeFalsy();
+        expect(element[0].parentNode).toEqual(parent[0]);
+
+        doc[0].hidden = false;
+
+        $animate.leave(element);
+        $rootScope.$digest();
+        expect(capturedAnimation).toBeTruthy();
+      });
+    });
+
     it('should animate only the specified CSS className matched within $animateProvider.classNameFilter', function() {
       module(function($animateProvider) {
         $animateProvider.classNameFilter(/only-allow-this-animation/);