fix($animateCss): make sure that skipBlocking avoids the pre-emptive transition-delay styling

matsko · matsko · commit 11695ca6e2ce · 2015-07-20T14:21:35.000-07:00
diff --git a/src/ngAnimate/animateCss.js b/src/ngAnimate/animateCss.js
@@ -624,7 +624,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
       // transition delay to allow for the transition to naturally do it's thing. The beauty here is
       // that if there is no transition defined then nothing will happen and this will also allow
       // other transitions to be stacked on top of each other without any chopping them out.
-      if (isFirst) {
+      if (isFirst && !options.skipBlocking) {
         blockTransitions(node, SAFE_FAST_FORWARD_DURATION_VALUE);
       }
 
@@ -683,12 +683,13 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
       }
 
       applyAnimationFromStyles(element, options);
-      if (!flags.blockTransition) {
+
+      if (flags.blockTransition || flags.blockKeyframeAnimation) {
+        applyBlocking(maxDuration);
+      } else if (!options.skipBlocking) {
         blockTransitions(node, false);
       }
 
-      applyBlocking(maxDuration);
-
       // TODO(matsko): for 1.5 change this code to have an animator object for better debugging
       return {
         $$willAnimate: true,
diff --git a/test/ngAnimate/animateCssSpec.js b/test/ngAnimate/animateCssSpec.js
@@ -1423,7 +1423,7 @@ describe("ngAnimate $animateCss", function() {
       they('should not place a CSS transition block if options.skipBlocking is provided',
         ['enter', 'leave', 'move', 'addClass', 'removeClass'], function(event) {
 
-        inject(function($animateCss, $rootElement, $$body) {
+        inject(function($animateCss, $rootElement, $$body, $window) {
           var element = jqLite('<div></div>');
           $rootElement.append(element);
           $$body.append($rootElement);
@@ -1441,14 +1441,23 @@ describe("ngAnimate $animateCss", function() {
             data.event = event;
           }
 
+          var blockSpy = spyOn($window, 'blockTransitions').andCallThrough();
+
           data.skipBlocking = true;
           var animator = $animateCss(element, data);
 
+          expect(blockSpy).not.toHaveBeenCalled();
+
           expect(element.attr('style')).toBeFalsy();
           animator.start();
           triggerAnimationStartFrame();
 
           expect(element.attr('style')).toBeFalsy();
+
+          // just to prove it works
+          data.skipBlocking = false;
+          var animator = $animateCss(element, { addClass: 'test' });
+          expect(blockSpy).toHaveBeenCalled();
         });
       });
 
