Fix issues with ngShow / ngHide animations

css/angular.css

@@ -2,7 +2,7 @@
 
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
 .ng-cloak, .x-ng-cloak,
-.ng-hide:not(.ng-animate) {
+.ng-hide:not(.ng-hide-animate) {
   display: none !important;
 }
 

src/ng/directive/ngShowHide.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var NG_HIDE_CLASS = 'ng-hide';
+var NG_HIDE_IN_PROGRESS_CLASS = 'ng-hide-animate';
 /**
  * @ngdoc directive
  * @name ngShow
@@ -161,7 +163,11 @@ var ngShowDirective = ['$animate', function($animate) {
     multiElement: true,
     link: function(scope, element, attr) {
       scope.$watch(attr.ngShow, function ngShowWatchAction(value){
-        $animate[value ? 'removeClass' : 'addClass'](element, 'ng-hide');
+        // we're adding a temporary, animation-specific class for ng-hide since this way
+        // we can control when the element is actually displayed on screen without having
+        // to have a global/greedy CSS selector that breaks when other animations are run.
+        // Read: https://github.com/angular/angular.js/issues/9103#issuecomment-58335845
+        $animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, NG_HIDE_IN_PROGRESS_CLASS);
       });
     }
   };
@@ -316,7 +322,9 @@ var ngHideDirective = ['$animate', function($animate) {
     multiElement: true,
     link: function(scope, element, attr) {
       scope.$watch(attr.ngHide, function ngHideWatchAction(value){
-        $animate[value ? 'addClass' : 'removeClass'](element, 'ng-hide');
+        // The comment inside of the ngShowDirective explains why we add and
+        // remove a temporary class for the show/hide animation
+        $animate[value ? 'addClass' : 'removeClass'](element,NG_HIDE_CLASS, NG_HIDE_IN_PROGRESS_CLASS);
       });
     }
   };

src/ngAnimate/animate.js

@@ -377,6 +377,7 @@ angular.module('ngAnimate', ['ng'])
     var forEach = angular.forEach;
     var selectors = $animateProvider.$$selectors;
     var isArray = angular.isArray;
+    var isString = angular.isString;
 
     var ELEMENT_NODE = 1;
     var NG_ANIMATE_STATE = '$$ngAnimateState';
@@ -467,6 +468,14 @@ angular.module('ngAnimate', ['ng'])
         return defer.promise;
       }
 
+      function parseAnimateOptions(options) {
+        // some plugin code may still be passing in the callback
+        // function as the last param for the $animate methods so
+        // it's best to only allow string or array values for now
+        if (isArray(options)) return options;
+        if (isString(options)) return [options];
+      }
+
       function resolveElementClasses(element, cache, runningAnimations) {
         runningAnimations = runningAnimations || {};
 
@@ -779,15 +788,16 @@ angular.module('ngAnimate', ['ng'])
          * @param {DOMElement} afterElement the sibling element (which is the previous element) of the element that will be the focus of the enter animation
          * @return {Promise} the animation callback promise
         */
-        enter : function(element, parentElement, afterElement) {
+        enter : function(element, parentElement, afterElement, options) {
+          options = parseAnimateOptions(options);
           element = angular.element(element);
           parentElement = prepareElement(parentElement);
           afterElement = prepareElement(afterElement);
 
           classBasedAnimationsBlocked(element, true);
           $delegate.enter(element, parentElement, afterElement);
           return runAnimationPostDigest(function(done) {
-            return performAnimation('enter', 'ng-enter', stripCommentsFromElement(element), parentElement, afterElement, noop, done);
+            return performAnimation('enter', 'ng-enter', stripCommentsFromElement(element), parentElement, afterElement, noop, options, done);
           });
         },
 
@@ -821,7 +831,8 @@ angular.module('ngAnimate', ['ng'])
          * @param {DOMElement} element the element that will be the focus of the leave animation
          * @return {Promise} the animation callback promise
         */
-        leave : function(element) {
+        leave : function(element, options) {
+          options = parseAnimateOptions(options);
           element = angular.element(element);
 
           cancelChildAnimations(element);
@@ -830,7 +841,7 @@ angular.module('ngAnimate', ['ng'])
           return runAnimationPostDigest(function(done) {
             return performAnimation('leave', 'ng-leave', stripCommentsFromElement(element), null, null, function() {
               $delegate.leave(element);
-            }, done);
+            }, options, done);
           });
         },
 
@@ -867,7 +878,8 @@ angular.module('ngAnimate', ['ng'])
          * @param {DOMElement} afterElement the sibling element (which is the previous element) of the element that will be the focus of the move animation
          * @return {Promise} the animation callback promise
         */
-        move : function(element, parentElement, afterElement) {
+        move : function(element, parentElement, afterElement, options) {
+          options = parseAnimateOptions(options);
           element = angular.element(element);
           parentElement = prepareElement(parentElement);
           afterElement = prepareElement(afterElement);
@@ -876,7 +888,7 @@ angular.module('ngAnimate', ['ng'])
           classBasedAnimationsBlocked(element, true);
           $delegate.move(element, parentElement, afterElement);
           return runAnimationPostDigest(function(done) {
-            return performAnimation('move', 'ng-move', stripCommentsFromElement(element), parentElement, afterElement, noop, done);
+            return performAnimation('move', 'ng-move', stripCommentsFromElement(element), parentElement, afterElement, noop, options, done);
           });
         },
 
@@ -909,8 +921,8 @@ angular.module('ngAnimate', ['ng'])
          * @param {string} className the CSS class that will be added to the element and then animated
          * @return {Promise} the animation callback promise
         */
-        addClass : function(element, className) {
-          return this.setClass(element, className, []);
+        addClass : function(element, className, options) {
+          return this.setClass(element, className, [], options);
         },
 
         /**
@@ -942,8 +954,8 @@ angular.module('ngAnimate', ['ng'])
          * @param {string} className the CSS class that will be animated and then removed from the element
          * @return {Promise} the animation callback promise
         */
-        removeClass : function(element, className) {
-          return this.setClass(element, [], className);
+        removeClass : function(element, className, options) {
+          return this.setClass(element, [], className, options);
         },
 
         /**
@@ -973,7 +985,9 @@ angular.module('ngAnimate', ['ng'])
          *   CSS classes have been set on the element
          * @return {Promise} the animation callback promise
          */
-        setClass : function(element, add, remove) {
+        setClass : function(element, add, remove, options) {
+          options = parseAnimateOptions(options);
+
           var STORAGE_KEY = '$$animateClasses';
           element = angular.element(element);
           element = stripCommentsFromElement(element);
@@ -1007,11 +1021,16 @@ angular.module('ngAnimate', ['ng'])
           });
 
           if (hasCache) {
+            if (options && cache.options) {
+              cache.options = cache.options.concat(options);
+            }
+
             //the digest cycle will combine all the animations into one function
             return cache.promise;
           } else {
             element.data(STORAGE_KEY, cache = {
-              classes : classes
+              classes : classes,
+              options : options
             });
           }
 
@@ -1034,7 +1053,7 @@ angular.module('ngAnimate', ['ng'])
               ? done()
               : performAnimation('setClass', classes, element, parentElement, null, function() {
                   $delegate.setClass(element, classes[0], classes[1]);
-                }, done);
+                }, cache.options, done);
           });
         },
 
@@ -1096,7 +1115,7 @@ angular.module('ngAnimate', ['ng'])
         CSS code. Element, parentElement and afterElement are provided DOM elements for the animation
         and the onComplete callback will be fired once the animation is fully complete.
       */
-      function performAnimation(animationEvent, className, element, parentElement, afterElement, domOperation, doneCallback) {
+      function performAnimation(animationEvent, className, element, parentElement, afterElement, domOperation, options, doneCallback) {
 
         var noopCancel = noop;
         var runner = animationRunner(element, animationEvent, className);
@@ -1204,6 +1223,11 @@ angular.module('ngAnimate', ['ng'])
         //the ng-animate class does nothing, but it's here to allow for
         //parent animations to find and cancel child animations when needed
         element.addClass(NG_ANIMATE_CLASS_NAME);
+        if (isArray(options)) {
+          forEach(options, function(className) {
+            element.addClass(className);
+          });
+        }
 
         var localAnimationCount = globalAnimationCounter++;
         totalActiveAnimations++;
@@ -1273,8 +1297,15 @@ angular.module('ngAnimate', ['ng'])
         function closeAnimation() {
           if (!closeAnimation.hasBeenRun) {
             closeAnimation.hasBeenRun = true;
+            if (isArray(options)) {
+              forEach(options, function(className) {
+                element.removeClass(className);
+              });
+            }
+
             var data = element.data(NG_ANIMATE_STATE);
             if (data) {
+
               /* only structural animations wait for reflow before removing an
                  animation, but class-based animations don't. An example of this
                  failing would be when a parent HTML tag has a ng-class attribute
@@ -1539,7 +1570,7 @@ angular.module('ngAnimate', ['ng'])
 
       function parseMaxTime(str) {
         var maxValue = 0;
-        var values = angular.isString(str) ?
+        var values = isString(str) ?
           str.split(/\s*,\s*/) :
           [];
         forEach(values, function(value) {

src/ngMock/angular-mocks.js

@@ -809,6 +809,7 @@ angular.mock.animate = angular.module('ngAnimateMock', ['ng'])
           animate.queue.push({
             event : method,
             element : arguments[0],
+            options : arguments[arguments.length-1],
             args : arguments
           });
           return $delegate[method].apply($delegate, arguments);

test/ng/directive/ngShowHideSpec.js

@@ -156,6 +156,28 @@ describe('ngShow / ngHide animations', function() {
       expect(item.element.text()).toBe('data');
       expect(item.element).toBeHidden();
     }));
+
+    it('should apply the temporary `.ng-hide-animate` class to the element',
+      inject(function($compile, $rootScope, $animate) {
+
+      var item;
+      var $scope = $rootScope.$new();
+      $scope.on = false;
+      element = $compile(html(
+        '<div class="show-hide" ng-show="on">data</div>'
+      ))($scope);
+      $scope.$digest();
+
+      item = $animate.queue.shift();
+      expect(item.event).toEqual('addClass');
+      expect(item.options).toEqual('ng-hide-animate');
+
+      $scope.on = true;
+      $scope.$digest();
+      item = $animate.queue.shift();
+      expect(item.event).toEqual('removeClass');
+      expect(item.options).toEqual('ng-hide-animate');
+    }));
   });
 
   describe('ngHide', function() {
@@ -181,5 +203,27 @@ describe('ngShow / ngHide animations', function() {
       expect(item.element.text()).toBe('datum');
       expect(item.element).toBeShown();
     }));
+
+    it('should apply the temporary `.ng-hide-animate` class to the element',
+      inject(function($compile, $rootScope, $animate) {
+
+      var item;
+      var $scope = $rootScope.$new();
+      $scope.on = false;
+      element = $compile(html(
+        '<div class="show-hide" ng-hide="on">data</div>'
+      ))($scope);
+      $scope.$digest();
+
+      item = $animate.queue.shift();
+      expect(item.event).toEqual('removeClass');
+      expect(item.options).toEqual('ng-hide-animate');
+
+      $scope.on = true;
+      $scope.$digest();
+      item = $animate.queue.shift();
+      expect(item.event).toEqual('addClass');
+      expect(item.options).toEqual('ng-hide-animate');
+    }));
   });
 });

test/ngAnimate/animateSpec.js

@@ -2450,6 +2450,78 @@ describe("ngAnimate", function() {
         }));
       });
 
+      describe("options", function() {
+
+        it('should add and remove the temporary className value is provided', function() {
+          var captures = {};
+          module(function($animateProvider) {
+            $animateProvider.register('.capture', function() {
+              return {
+                enter : capture('enter'),
+                leave : capture('leave'),
+                move : capture('move'),
+                addClass : capture('addClass'),
+                removeClass : capture('removeClass'),
+                setClass : capture('setClass')
+              };
+
+              function capture(event) {
+                return function(element, add, remove, done) {
+                  //some animations only have one extra param
+                  done = done || remove || add;
+                  captures[event]=done;
+                };
+              }
+            });
+          });
+          inject(function($animate, $rootScope, $compile, $rootElement, $document) {
+            var container = jqLite('<div class="container"></div>');
+            var container2 = jqLite('<div class="container2"></div>');
+            var element = jqLite('<div class="capture"></div>');
+            $rootElement.append(container);
+            $rootElement.append(container2);
+            angular.element($document[0].body).append($rootElement);
+
+            $compile(element)($rootScope);
+
+            assertTempClass('enter', 'temp-enter', function() {
+              $animate.enter(element, container, null, 'temp-enter');
+            });
+
+            assertTempClass('move', 'temp-move', function() {
+              $animate.move(element, null, container2, 'temp-move');
+            });
+
+            assertTempClass('addClass', 'temp-add', function() {
+              $animate.addClass(element, 'add', 'temp-add');
+            });
+
+            assertTempClass('removeClass', 'temp-remove', function() {
+              $animate.removeClass(element, 'add', 'temp-remove');
+            });
+
+            element.addClass('remove');
+            assertTempClass('setClass', 'temp-set', function() {
+              $animate.setClass(element, 'add', 'remove', 'temp-set');
+            });
+
+            assertTempClass('leave', 'temp-leave', function() {
+              $animate.leave(element, 'temp-leave');
+            });
+
+            function assertTempClass(event, className, animationOperation) {
+              expect(element).not.toHaveClass(className);
+              animationOperation();
+              $rootScope.$digest();
+              expect(element).toHaveClass(className);
+              $animate.triggerReflow();
+              captures[event]();
+              $animate.triggerCallbacks();
+              expect(element).not.toHaveClass(className);
+            }
+          });
+        });
+      });
 
       describe("addClass / removeClass", function() {