fix(ngAnimate): do not abort animation if only ng-anchor-in is used

angular · Apr 15, 2015 · 3333a5c · 3333a5c
1 parent f8f07e8
commit 3333a5c
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 12 deletions.
diff --git a/src/ngAnimate/animateCssDriver.js b/src/ngAnimate/animateCssDriver.js
@@ -56,27 +56,39 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
 
       rootBodyElement.append(clone);
 
-      var animatorOut = prepareOutAnimation();
+      var animatorIn, animatorOut = prepareOutAnimation();
+
+      // the user may not end up using the `out` animation and
+      // only making use of the `in` animation or vice-versa.
+      // In either case we should allow this and not assume the
+      // animation is over unless both animations are not used.
       if (!animatorOut) {
-        return end();
+        animatorIn = prepareInAnimation();
+        if (!animatorIn) {
+          return end();
+        }
       }
 
+      var startingAnimator = animatorOut || animatorIn;
+
       return {
         start: function() {
           var runner;
 
-          var currentAnimation = animatorOut.start();
+          var currentAnimation = startingAnimator.start();
           currentAnimation.done(function() {
             currentAnimation = null;
-            var animatorIn = prepareInAnimation();
-            if (animatorIn) {
-              currentAnimation = animatorIn.start();
-              currentAnimation.done(function() {
-                currentAnimation = null;
-                end();
-                runner.complete();
-              });
-              return currentAnimation;
+            if (!animatorIn) {
+              animatorIn = prepareInAnimation();
+              if (animatorIn) {
+                currentAnimation = animatorIn.start();
+                currentAnimation.done(function() {
+                  currentAnimation = null;
+                  end();
+                  runner.complete();
+                });
+                return currentAnimation;
+              }
             }
             // in the event that there is no `in` animation
             end();

diff --git a/test/ngAnimate/animateCssDriverSpec.js b/test/ngAnimate/animateCssDriverSpec.js
@@ -410,6 +410,59 @@ describe("ngAnimate $$animateCssDriver", function() {
         expect(anchorDetails.event).toBeFalsy();
       }));
 
+      they("should only fire the ng-anchor-$prop animation if only a $prop animation is defined",
+        ['out', 'in'], function(direction) {
+
+        var expectedClass = 'ng-anchor-' + direction;
+        var animationStarted;
+        var runner;
+
+        module(function($provide) {
+          $provide.factory('$animateCss', function($$AnimateRunner) {
+            return function(element, options) {
+              var addClass = (options.addClass || '').trim();
+              if (addClass === expectedClass) {
+                return {
+                  start: function() {
+                    animationStarted = addClass;
+                    return runner = new $$AnimateRunner();
+                  }
+                };
+              }
+            };
+          });
+        });
+
+        inject(function($rootElement, $$rAF) {
+          var fromAnchor = jqLite('<div></div>');
+          from.append(fromAnchor);
+          var toAnchor = jqLite('<div></div>');
+          to.append(toAnchor);
+
+          $rootElement.append(fromAnchor);
+          $rootElement.append(toAnchor);
+
+          var complete = false;
+
+          driver({
+            from: fromAnimation,
+            to: toAnimation,
+            anchors: [{
+              'out': fromAnchor,
+              'in': toAnchor
+            }]
+          }).start().done(function() {
+            complete = true;
+          });
+
+          expect(animationStarted).toBe(expectedClass);
+          runner.end();
+          $$rAF.flush();
+          expect(complete).toBe(true);
+        });
+      });
+
+
       it("should provide an explicit delay setting in the options provided to $animateCss for anchor animations",
         inject(function($rootElement) {