chore($animate): replace show/hide with addClass/removeClass

Author: matsko

Diff for: docs/component-spec/annotationsSpec.js

@@ -74,10 +74,10 @@ describe('Docs Annotations', function() {
             enter : function(element, done) {
               $window.setTimeout(done, 1000);
             },
-            show : function(element, done) {
+            removeClass : function(element, className, done) {
               $window.setTimeout(done, 500);
             },
-            hide : function(element, done) {
+            addClass : function(element, className, done) {
               $window.setTimeout(done, 200);
             }
           }

Diff for: docs/components/angular-bootstrap/bootstrap.js

@@ -366,12 +366,12 @@ directive.foldout = ['$http', '$animate','$window', function($http, $animate, $w
               //avoid showing the element if the user has already closed it
               if(container.css('display') == 'block') {
                 container.css('display','none');
-                $animate.show(container);
+                $animate.addClass(container, 'ng-hide');
               }
             });
           }
           else {
-            container.hasClass('ng-hide') ? $animate.show(container) : $animate.hide(container);
+            container.hasClass('ng-hide') ? $animate.removeClass(container, 'ng-hide') : $animate.addClass(container, 'ng-hide');
           }
         });
       });

Diff for: src/ng/animate.js

@@ -80,16 +80,6 @@ var $AnimateProvider = ['$provide', function($provide) {
         this.enter(element, parent, after, done);
       },
 
-      show : function(element, done) {
-        element.removeClass('ng-hide');
-        (done || noop)();
-      },
-
-      hide : function(element, done) {
-        element.addClass('ng-hide');
-        (done || noop)();
-      },
-
       addClass : function(element, className, done) {
         className = isString(className) ?
                       className :

Diff for: src/ng/directive/ngShowHide.js

@@ -100,7 +100,7 @@
 var ngShowDirective = ['$animate', function($animate) {
   return function(scope, element, attr) {
     scope.$watch(attr.ngShow, function ngShowWatchAction(value){
-      $animate[toBoolean(value) ? 'show' : 'hide'](element);
+      $animate[toBoolean(value) ? 'removeClass' : 'addClass'](element, 'ng-hide');
     });
   };
 }];
@@ -204,7 +204,7 @@ var ngShowDirective = ['$animate', function($animate) {
 var ngHideDirective = ['$animate', function($animate) {
   return function(scope, element, attr) {
     scope.$watch(attr.ngHide, function ngHideWatchAction(value){
-      $animate[toBoolean(value) ? 'hide' : 'show'](element);
+      $animate[toBoolean(value) ? 'addClass' : 'removeClass'](element, 'ng-hide');
     });
   };
 }];

Diff for: src/ngAnimate/animate.js

@@ -30,8 +30,8 @@
  * | {@link ng.directive:ngInclude#animations ngInclude}       | enter and leave                                    |
  * | {@link ng.directive:ngSwitch#animations ngSwitch}         | enter and leave                                    |
  * | {@link ng.directive:ngIf#animations ngIf}                 | enter and leave                                    |
- * | {@link ng.directive:ngShow#animations ngShow & ngHide}    | show and hide                                      |
  * | {@link ng.directive:ngShow#animations ngClass}            | add and remove                                     |
+ * | {@link ng.directive:ngShow#animations ngShow & ngHide}    | add and remove (the ng-hide class value)           |
  *
  * You can find out more information about animations upon visiting each directive page.
  *
@@ -335,60 +335,6 @@ angular.module('ngAnimate', ['ng'])
           performAnimation('move', 'ng-move', element, null, null, done);
         },
 
-        /**
-         * @ngdoc function
-         * @name ngAnimate.$animate#show
-         * @methodOf ngAnimate.$animate
-         * @function
-         *
-         * @description
-         * Reveals the element by removing the `ng-hide` class thus performing an animation in the process. During
-         * this animation the CSS classes present on the element will be:
-         *
-         * <pre>
-         * .ng-hide //already on the element if hidden
-         * .ng-hide-remove
-         * .ng-hide-remove-active
-         * </pre>
-         *
-         * Once the animation is complete then all three CSS classes will be removed from the element.
-         * The done callback, if provided, will be also fired once the animation is complete.
-         *
-         * @param {jQuery/jqLite element} element the element that will be rendered visible or hidden
-         * @param {function()=} done callback function that will be called once the animation is complete
-        */
-        show : function(element, done) {
-          performAnimation('show', 'ng-hide-remove', element, null, null, function() {
-            $delegate.show(element, done);
-          });
-        },
-
-        /**
-         * @ngdoc function
-         * @name ngAnimate.$animate#hide
-         * @methodOf ngAnimate.$animate
-         *
-         * @description
-         * Sets the element to hidden by adding the `ng-hide` class it. However, before the class is applied
-         * the following CSS classes will be added temporarily to trigger any animation code:
-         *
-         * <pre>
-         * .ng-hide-add
-         * .ng-hide-add-active
-         * </pre>
-         *
-         * Once the animation is complete then both CSS classes will be removed and `ng-hide` will be added to the element.
-         * The done callback, if provided, will be also fired once the animation is complete.
-         *
-         * @param {jQuery/jqLite element} element the element that will be rendered visible or hidden
-         * @param {function()=} done callback function that will be called once the animation is complete
-        */
-        hide : function(element, done) {
-          performAnimation('hide', 'ng-hide-add', element, null, null, function() {
-            $delegate.hide(element, done);
-          });
-        },
-
         /**
          * @ngdoc function
          * @name ngAnimate.$animate#addClass
@@ -617,12 +563,6 @@ angular.module('ngAnimate', ['ng'])
       move : function(element, done) {
         return animate(element, 'ng-move', done);
       },
-      show : function(element, done) {
-        return animate(element, 'ng-hide-remove', done);
-      },
-      hide : function(element, done) {
-        return animate(element, 'ng-hide-add', done);
-      },
       addClass : function(element, className, done) {
         return animate(element, className, done);
       },

Diff for: test/ng/animateSpec.js

@@ -31,22 +31,10 @@ describe("$animate", function() {
       expect(element.text()).toBe('21');
     }));
 
-    it("should animate the show animation event", inject(function($animate) {
-      element.addClass('ng-hide');
-      $animate.show(element);
-      expect(element).toBeShown();
-    }));
-
-    it("should animate the hide animation event", inject(function($animate) {
-      expect(element).toBeShown();
-      $animate.hide(element);
-      expect(element).toBeHidden();
-    }));
-
     it("should still perform DOM operations even if animations are disabled", inject(function($animate) {
       $animate.enabled(false);
       expect(element).toBeShown();
-      $animate.hide(element);
+      $animate.addClass(element, 'ng-hide');
       expect(element).toBeHidden();
     }));
   });

Diff for: test/ng/directive/ngShowHideSpec.js

@@ -81,14 +81,14 @@ describe('ngShow / ngHide animations', function() {
       ))($scope);
       $scope.$digest();
 
-      item = $animate.process('show').element;
+      item = $animate.process('removeClass').element;
       expect(item.text()).toBe('data');
       expect(item).toBeShown();
 
       $scope.on = false;
       $scope.$digest();
 
-      item = $animate.process('hide').element;
+      item = $animate.process('addClass').element;
       expect(item.text()).toBe('data');
       expect(item).toBeHidden();
     }));
@@ -104,14 +104,14 @@ describe('ngShow / ngHide animations', function() {
       ))($scope);
       $scope.$digest();
 
-      item = $animate.process('hide').element;
+      item = $animate.process('addClass').element;
       expect(item.text()).toBe('datum');
       expect(item).toBeHidden();
 
       $scope.off = false;
       $scope.$digest();
 
-      item = $animate.process('show').element;
+      item = $animate.process('removeClass').element;
       expect(item.text()).toBe('datum');
       expect(item).toBeShown();
     }));