feat(ngAnimate): complete rewrite of animations

- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
  - $animate.enter(element, parent, after, done);
  - $animate.leave(element, done);
  - $animate.move(element, parent, after, done);
  - $animate.addClass(element, className, done);
  - $animate.removeClass(element, className, done);

BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions

Author: matsko

Gruntfile.js

@@ -160,6 +160,10 @@ module.exports = function(grunt) {
         dest: 'build/angular-resource.js',
         src: util.wrap(['src/ngResource/resource.js'], 'module')
       },
+      animate: {
+        dest: 'build/angular-animate.js',
+        src: util.wrap(['src/ngAnimate/animate.js'], 'module')
+      },
       route: {
         dest: 'build/angular-route.js',
         src: util.wrap([
@@ -178,6 +182,7 @@ module.exports = function(grunt) {
 
     min: {
       angular: 'build/angular.js',
+      animate: 'build/angular-animate.js',
       cookies: 'build/angular-cookies.js',
       loader: 'build/angular-loader.js',
       mobile: 'build/angular-mobile.js',

angularFiles.js

@@ -10,8 +10,7 @@ angularFiles = {
     'src/auto/injector.js',
 
     'src/ng/anchorScroll.js',
-    'src/ng/animation.js',
-    'src/ng/animator.js',
+    'src/ng/animate.js',
     'src/ng/browser.js',
     'src/ng/cacheFactory.js',
     'src/ng/compile.js',
@@ -66,6 +65,7 @@ angularFiles = {
   ],
 
   'angularSrcModules': [
+    'src/ngAnimate/animate.js',
     'src/ngCookies/cookies.js',
     'src/ngResource/resource.js',
     'src/ngRoute/routeUtils.js',
@@ -107,6 +107,7 @@ angularFiles = {
     'test/*.js',
     'test/auto/*.js',
     'test/ng/**/*.js',
+    'test/ngAnimate/*.js',
     'test/ngCookies/*.js',
     'test/ngResource/*.js',
     'test/ngRoute/**/*.js',

css/angular.css

@@ -8,3 +8,7 @@
 ng\:form {
   display: block;
 }
+
+.ng-hide {
+  display: none;
+}

docs/component-spec/annotationsSpec.js

@@ -67,41 +67,33 @@ describe('Docs Annotations', function() {
 
     var $scope, parent, element, url, window;
     beforeEach(function() {
-      module(function($provide, $animationProvider) {
+      module(function($provide, $animateProvider) {
         $provide.value('$window', window = angular.mock.createMockWindow());
-        $animationProvider.register('foldout-enter', function($window) {
+        $animateProvider.register('.foldout', function($window) {
           return {
-            start : function(element, done) {
+            enter : function(element, done) {
               $window.setTimeout(done, 1000);
-            }
-          }
-        });
-        $animationProvider.register('foldout-hide', function($window) {
-          return {
-            start : function(element, done) {
+            },
+            show : function(element, done) {
               $window.setTimeout(done, 500);
-            }
-          }
-        });
-        $animationProvider.register('foldout-show', function($window) {
-          return {
-            start : function(element, done) {
+            },
+            hide : function(element, done) {
               $window.setTimeout(done, 200);
             }
           }
         });
       });
-      inject(function($rootScope, $compile, $templateCache, $rootElement, $animator) {
-        $animator.enabled(true);
+      inject(function($rootScope, $compile, $templateCache, $rootElement, $animate) {
+        $animate.enabled(true);
         url = '/page.html';
         $scope = $rootScope.$new();
         parent = angular.element('<div class="parent"></div>');
-        element = angular.element('<div data-url="' + url + '" foldout></div>');
 
         //we're injecting the element to the $rootElement since the changes in
-        //$animator only detect and perform animations if the root element has
+        //$animate only detect and perform animations if the root element has
         //animations enabled. If the element is not apart of the DOM
         //then animations are skipped.
+        element = angular.element('<div data-url="' + url + '" class="foldout" foldout></div>');
         parent.append(element);
         $rootElement.append(parent);
         body.append($rootElement);
@@ -142,16 +134,19 @@ describe('Docs Annotations', function() {
       $httpBackend.flush();
       window.setTimeout.expect(1).process();
       window.setTimeout.expect(1000).process();
+      window.setTimeout.expect(0).process();
 
       //hide
       element.triggerHandler('click');
       window.setTimeout.expect(1).process();
-      window.setTimeout.expect(500).process();
+      window.setTimeout.expect(200).process();
+      window.setTimeout.expect(0).process();
 
       //show
       element.triggerHandler('click');
       window.setTimeout.expect(1).process();
-      window.setTimeout.expect(200).process();
+      window.setTimeout.expect(500).process();
+      window.setTimeout.expect(0).process();
     }));
 
   });
@@ -160,7 +155,7 @@ describe('Docs Annotations', function() {
 
     var window, $scope, ctrl;
     beforeEach(function() {
-      module(function($provide, $animationProvider) {
+      module(function($provide, $animateProvider) {
         $provide.value('$window', window = angular.mock.createMockWindow());
       });
       inject(function($rootScope, $controller, $location, $cookies, sections) {

docs/components/angular-bootstrap/bootstrap-prettify.js

@@ -183,8 +183,8 @@ directive.ngEvalJavascript = ['getEmbeddedTemplate', function(getEmbeddedTemplat
 }];
 
 
-directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location', '$sniffer',
-                function($templateCache,   $browser,  docsRootScope, $location,   $sniffer) {
+directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location', '$sniffer', '$animate',
+                function($templateCache,   $browser,  docsRootScope, $location,   $sniffer, $animate) {
   return {
     terminal: true,
     link: function(scope, element, attrs) {
@@ -193,6 +193,7 @@ directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location',
           deregisterEmbedRootScope;
 
       modules.push(['$provide', function($provide) {
+        $provide.value('$animate', $animate);
         $provide.value('$templateCache', $templateCache);
         $provide.value('$anchorScroll', angular.noop);
         $provide.value('$browser', $browser);

docs/components/angular-bootstrap/bootstrap.js

@@ -335,12 +335,11 @@ directive.tabPane = function() {
   };
 };
 
-directive.foldout = ['$http', '$animator','$window', function($http, $animator, $window) {
+directive.foldout = ['$http', '$animate','$window', function($http, $animate, $window) {
   return {
     restrict: 'A',
     priority : 500,
     link: function(scope, element, attrs) {
-      var animator = $animator(scope, { ngAnimate: "'foldout'" });
       var container, loading, url = attrs.url;
       if(/\/build\//.test($window.location.href)) {
         url = '/build/docs' + url;
@@ -353,7 +352,7 @@ directive.foldout = ['$http', '$animator','$window', function($http, $animator,
             loading = true;
             var par = element.parent();
             container = angular.element('<div class="foldout">loading...</div>');
-            animator.enter(container, null, par);
+            $animate.enter(container, null, par);
 
             $http.get(url, { cache : true }).success(function(html) {
               loading = false;
@@ -367,12 +366,12 @@ directive.foldout = ['$http', '$animator','$window', function($http, $animator,
               //avoid showing the element if the user has already closed it
               if(container.css('display') == 'block') {
                 container.css('display','none');
-                animator.show(container);
+                $animate.show(container);
               }
             });
           }
           else {
-            container.css('display') == 'none' ? animator.show(container) : animator.hide(container);
+            container.hasClass('ng-hide') ? $animate.show(container) : $animate.hide(container);
           }
         });
       });

docs/src/example.js

@@ -134,7 +134,7 @@ exports.Example.prototype.toHtmlTabs = function() {
 
 exports.Example.prototype.toHtmlEmbed = function() {
   var out = [];
-  out.push('<div class="well doc-example-live animator-container"');
+  out.push('<div class="well doc-example-live animate-container"');
   if(this.animations) {
     out.push(" ng-class=\"{'animations-off':animationsOff == true}\"");
   }

docs/src/ngdoc.js

@@ -494,6 +494,19 @@ Doc.prototype = {
   html_usage_parameters: function(dom) {
     var self = this;
     var params = this.param ? this.param : [];
+    if(this.animations) {
+      dom.h('Animations', this.animations, function(animations){
+        dom.html('<ul>');
+        var animations = animations.split("\n");
+        animations.forEach(function(ani) {
+          dom.html('<li>');
+          dom.text(ani);
+          dom.html('</li>');
+        });
+        dom.html('</ul>');
+      });
+      dom.html('<a href="api/ngAnimate.$animate">Click here</a> to learn more about the steps involved in the animation.');
+    }
     if(params.length > 0) {
       dom.html('<h2 id="parameters">Parameters</h2>');
       dom.html('<table class="variables-matrix table table-bordered table-striped">');
@@ -538,18 +551,6 @@ Doc.prototype = {
       dom.html('</tbody>');
       dom.html('</table>');
     }
-    if(this.animations) {
-      dom.h('Animations', this.animations, function(animations){
-        dom.html('<ul>');
-        var animations = animations.split("\n");
-        animations.forEach(function(ani) {
-          dom.html('<li>');
-          dom.text(ani);
-          dom.html('</li>');
-        });
-        dom.html('</ul>');
-      });
-    }
   },
 
   html_usage_returns: function(dom) {
@@ -665,48 +666,6 @@ Doc.prototype = {
             dom.text('</' + element + '>');
           });
         }
-        if(self.animations) {
-          var animations = [], matches = self.animations.split("\n");
-          matches.forEach(function(ani) {
-            var name = ani.match(/^\s*(.+?)\s*-/)[1];
-            animations.push(name);
-          });
-
-          dom.html('with <span id="animations">animations</span>');
-          var comment;
-          if(animations.length == 1) {
-            comment = 'The ' + animations[0] + ' animation is supported';
-          }
-          else {
-            var rhs = animations[animations.length-1];
-            var lhs = '';
-            for(var i=0;i<animations.length-1;i++) {
-              if(i>0) {
-                lhs += ', ';
-              }
-              lhs += animations[i];
-            }
-            comment = 'The ' + lhs + ' and ' + rhs + ' animations are supported';
-          }
-          var element = self.element || 'ANY';
-          dom.code(function() {
-            dom.text('//' + comment + "\n");
-            dom.text('<' + element + ' ');
-            dom.text(dashCase(self.shortName));
-            renderParams('\n     ', '="', '"', true);
-            dom.text(' ng-animate="{');
-            animations.forEach(function(ani, index) {
-              if (index) {
-                dom.text(', ');
-              }
-              dom.text(ani + ': \'' + ani + '-animation\'');
-            });
-            dom.text('}">\n   ...\n');
-            dom.text('</' + element + '>');
-          });
-
-          dom.html('<a href="api/ng.$animator#Methods">Click here</a> to learn more about the steps involved in the animation.');
-        }
       }
       self.html_usage_directiveInfo(dom);
       self.html_usage_parameters(dom);