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

5 files changed, 44 insertions, 83 deletions

diff --git a/docs/src/example.js b/docs/src/example.js
index cdbc24a7..9471b3fa 100644
--- a/docs/src/example.js
+++ b/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}\"");
   }
diff --git a/docs/src/ngdoc.js b/docs/src/ngdoc.js
index 394510c5..eb26bbf2 100644
--- a/docs/src/ngdoc.js
+++ b/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);
diff --git a/docs/src/templates/css/animations.css b/docs/src/templates/css/animations.css
index 2d54bbfb..7324a8a1 100644
--- a/docs/src/templates/css/animations.css
+++ b/docs/src/templates/css/animations.css
@@ -1,4 +1,4 @@
-.reveal {
+.reveal.ng-enter {
   -webkit-transition:1s linear all;
   -moz-transition:1s linear all;
   -o-transition:1s linear all;
@@ -6,7 +6,7 @@
 
   opacity:0;
 }
-.reveal.reveal-active {
+.reveal.ng-enter.ng-enter-active {
   opacity:1;
 }
 
@@ -15,48 +15,45 @@
   overflow:hidden;
 }
 
-.slide-reveal {
+.slide-reveal > .ng-enter {
   -webkit-transition:0.5s linear all;
   -moz-transition:0.5s linear all;
   -o-transition:0.5s linear all;
   transition:0.5s linear all;
-  opacity:0.5;
 
+  opacity:0.5;
   position:relative;
   opacity:0;
   top:10px;
 }
-.slide-reveal.slide-reveal-active {
+.slide-reveal > .ng-enter.ng-enter-active {
   top:0;
   opacity:1;
 }
 
-.expand-enter {
+.expand.ng-enter,
+.expand.ng-leave {
   -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
   -moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
   -o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
   transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-
+}
+.expand.ng-enter {
   opacity:0;
   line-height:0;
   height:0!important;
 }
-.expand-enter.expand-enter-active {
+.expand.ng-enter.expand.ng-enter-active {
   opacity:1;
   line-height:20px;
   height:20px!important;
 }
 
-.expand-leave {
-  -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-  -moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-  -o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-  transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-
+.expand.ng-leave {
   opacity:1;
   height:20px;
 }
-.expand-leave.expand-leave-active {
+.expand.ng-leave.expand.ng-leave-active {
   opacity:0;
   height:0;
 }
@@ -73,32 +70,36 @@
   padding:1em;
 }
 
-.animator-container.animations-off * {
+.animate-container.animations-off * {
   -webkit-transition: none;
   -moz-transition: none;
   -o-transition: color 0 ease-in; /* opera is special :) */
   transition: none;
 }
 
-.foldout-show, .foldout-enter, .foldout-hide {
+.foldout.ng-enter,
+.foldout.ng-hide-add,
+.foldout.ng-hide-remove {
   -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
   -moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
   -o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
   transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
 }
 
-.foldout-show, .foldout-enter {
+.foldout.ng-hide-remove,
+.foldout.ng-enter {
   opacity:0;
 }
 
-.foldout-show.foldout-show-active, .foldout-hide.foldout-hide-active {
+.foldout.ng-hide-remove.ng-hide-remove-active,
+.foldout.ng-enter.ng-enter-active {
   opacity:1;
 }
 
-.foldout-hide {
+.foldout.ng-hide-add {
   opacity:1;
 }
 
-.foldout-hide.foldout-hide-active {
+.foldout.ng-hide-add.ng-hide-active {
   opacity:0;
 }
diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html
index 82a5c87e..3f3e83c8 100644
--- a/docs/src/templates/index.html
+++ b/docs/src/templates/index.html
@@ -43,6 +43,7 @@
       addTag('script', {src: path('angular-cookies.js') }, sync);
       addTag('script', {src: path('angular-sanitize.js') }, sync);
       addTag('script', {src: path('angular-mobile.js') }, sync);
+      addTag('script', {src: path('angular-animate.js') }, sync);
       addTag('script', {src: 'components/angular-bootstrap.js' }, sync);
       addTag('script', {src: 'components/angular-bootstrap-prettify.js' }, sync);
       addTag('script', {src: 'components/google-code-prettify.js' }, sync);
@@ -201,7 +202,7 @@
   </header>
 
  <div id="docs-fold-overlay" ng-show="docs_fold" ng-click="fold(null)"></div>
- <div id="docs-fold" ng-show="docs_fold" ng-animate="'fold'">
+ <div class="foldout" id="docs-fold" ng-show="docs_fold">
    <div id="docs-fold-close" ng-click="fold(null)">
      <span class="icon-remove-sign"></span>
    </div>
@@ -283,21 +284,21 @@
               <li class="nav-header section" ng-show="module.directives">
                 <a href="{{URL.directive}}" class="guide">directive</a>
               </li>
-              <li ng-repeat="page in module.directives track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
+              <li ng-repeat="page in module.directives track by page.url" ng-class="navClass(page)" class="expand api-list-item">
                 <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
               </li>
 
               <li class="nav-header section" ng-show="module.filters">
                 <a href="{{URL.filter}}" class="guide">filter</a>
               </li>
-              <li ng-repeat="page in module.filters track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
+              <li ng-repeat="page in module.filters track by page.url" ng-class="navClass(page)" class="expand api-list-item">
                 <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
               </li>
 
               <li class="nav-header section" ng-show="module.services">
                 <a href="{{URL.service}}" class="guide">service</a>
               </li>
-              <li ng-repeat="service in module.services track by service.instance.url" ng-animate="'expand'" ng-class="navClass(service.instance, service.provider)" class="api-list-item">
+              <li ng-repeat="service in module.services track by service.instance.url" ng-class="navClass(service.instance, service.provider)" class="api-list-item expand">
                 <a ng-show="service.provider" class="pull-right" href="{{service.provider.url}}" tabindex="2"><i class="icon-cog"></i></a>
                 <a href="{{service.instance.url}}" tabindex="2">{{service.name}}</a>
               </li>
@@ -305,7 +306,7 @@
               <li class="nav-header section" ng-show="module.types">
                 <a href="{{URL.type}}" class="guide">Types</a>
               </li>
-              <li ng-repeat="page in module.types track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
+              <li ng-repeat="page in module.types track by page.url" ng-class="navClass(page)" class="expand api-list-item">
                 <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
               </li>
 
@@ -334,7 +335,7 @@
 
         <div id="loading" ng-show="loading">Loading...</div>
 
-        <div ng-hide="loading" ng-include src="currentPage.partialUrl" onload="afterPartialLoaded()" autoscroll class="content" ng-animate="{enter: 'slide-reveal'}" ></div>
+        <div ng-hide="loading" ng-include src="currentPage.partialUrl" onload="afterPartialLoaded()" autoscroll class="content slide-reveal"></div>
 
         <div id="disqus" class="disqus">
           <h2>Discussion</h2>
diff --git a/docs/src/templates/js/docs.js b/docs/src/templates/js/docs.js
index 7cac6a9a..05b09571 100644
--- a/docs/src/templates/js/docs.js
+++ b/docs/src/templates/js/docs.js
@@ -803,7 +803,7 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie
 };
 
 
-angular.module('docsApp', ['ngResource', 'ngRoute', 'ngCookies', 'ngSanitize', 'bootstrap', 'bootstrapPrettify', 'docsData']).
+angular.module('docsApp', ['ngResource', 'ngRoute', 'ngCookies', 'ngSanitize', 'ngAnimate', 'bootstrap', 'bootstrapPrettify', 'docsData']).
   config(function($locationProvider) {
     $locationProvider.html5Mode(true).hashPrefix('!');
   }).