From 81923f1e41560327f7de6e8fddfda0d2612658f3 Mon Sep 17 00:00:00 2001
From: Matias Niemelä
Date: Tue, 18 Jun 2013 13:59:57 -0400
Subject: 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
---
 src/ng/directive/ngIf.js | 27 +++++++++++----------------
 1 file changed, 11 insertions(+), 16 deletions(-)

(limited to 'src/ng/directive/ngIf.js')

diff --git a/src/ng/directive/ngIf.js b/src/ng/directive/ngIf.js
index c8166ee5..9d99d859 100755
--- a/src/ng/directive/ngIf.js
+++ b/src/ng/directive/ngIf.js
@@ -30,7 +30,7 @@
  * jQuery's `.addClass()` method, and the element is later removed. When `ngIf` recreates the element
  * the added class will be lost because the original compiled state is used to regenerate the element.
  *
- * Additionally, you can provide animations via the ngAnimate attribute to animate the **enter**
+ * Additionally, you can provide animations via the ngAnimate module to animate the **enter**
  * and **leave** effects.
  *
  * @animations
@@ -47,36 +47,32 @@
     <file name="index.html">
       Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
       Show when checked:
-      <span ng-if="checked" ng-animate="'example'">
+      <span ng-if="checked" class="example-if">
         I'm removed when the checkbox is unchecked.
       </span>
     </file>
     <file name="animations.css">
-      .example-leave, .example-enter {
+      .example-if.ng-enter,
+      .example-if.ng-leave {
         -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
         -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-        -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
         -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
         transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
       }
 
-      .example-enter {
+      .example-if.ng-enter,
+      .example-if.ng-leave.ng-leave-active {
         opacity:0;
       }
-      .example-enter.example-enter-active {
-        opacity:1;
-      }
 
-      .example-leave {
+      .example-if.ng-enter.ng-enter-active,
+      .example-if.ng-leave {
         opacity:1;
       }
-      .example-leave.example-leave-active {
-        opacity:0;
-      }
     </file>
   </example>
  */
-var ngIfDirective = ['$animator', function($animator) {
+var ngIfDirective = ['$animate', function($animate) {
   return {
     transclude: 'element',
     priority: 1000,
@@ -84,11 +80,10 @@ var ngIfDirective = ['$animator', function($animator) {
     restrict: 'A',
     compile: function (element, attr, transclude) {
       return function ($scope, $element, $attr) {
-        var animate = $animator($scope, $attr);
         var childElement, childScope;
         $scope.$watch($attr.ngIf, function ngIfWatchAction(value) {
           if (childElement) {
-            animate.leave(childElement);
+            $animate.leave(childElement);
             childElement = undefined;
           }
           if (childScope) {
@@ -99,7 +94,7 @@ var ngIfDirective = ['$animator', function($animator) {
             childScope = $scope.$new();
             transclude(childScope, function (clone) {
               childElement = clone;
-              animate.enter(clone, $element.parent(), $element);
+              $animate.enter(clone, $element.parent(), $element);
             });
           }
         });
-- 
cgit v1.2.3