fix($animateCss): ensure animations execute if only a keyframeStyle is provided

matsko · matsko · commit 97d79eec8009 · 2015-07-14T13:45:03.000-07:00
`$animateCss` is a fan of transition animations, but it turns out that if only a keyframeStyle is provided into the animation upon constrution then it will quit because it assumes that nothing will be animated (since no classes or styles are being applied). This patch ensures that a keyframe style can solely be applied to an animation triggered with `$animateCss`. ```js // this will now work as expected $animateCss(element, { keyframeStyle: '1s rotate' }).start(); ``` Closes angular#12124 Closes angular#12340
diff --git a/src/ngAnimate/animateCss.js b/src/ngAnimate/animateCss.js
@@ -560,10 +560,14 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
       var fullClassName = classes + ' ' + setupClasses;
       var activeClasses = pendClasses(setupClasses, '-active');
       var hasToStyles = styles.to && Object.keys(styles.to).length > 0;
-
-      // there is no way we can trigger an animation since no styles and
-      // no classes are being applied which would then trigger a transition
-      if (!hasToStyles && !setupClasses) {
+      var containsKeyframeAnimation = (options.keyframeStyle || '').length > 0;
+
+      // there is no way we can trigger an animation if no styles and
+      // no classes are being applied which would then trigger a transition,
+      // unless there a is raw keyframe value that is applied to the element.
+      if (!containsKeyframeAnimation
+           && !hasToStyles
+           && !setupClasses) {
         return closeAndReturnNoopAnimator();
       }
 
diff --git a/test/ngAnimate/animateCssSpec.js b/test/ngAnimate/animateCssSpec.js
@@ -2204,6 +2204,23 @@ describe("ngAnimate $animateCss", function() {
           expect(element.css(prefix + 'animation-duration')).toEqual('5.5s');
           expect(element.css(prefix + 'animation-name')).toEqual('my_animation');
         }));
+
+        it("should be able to execute the animation if it is the only provided value",
+          inject(function($animateCss, $rootElement) {
+
+          var options = {
+            keyframeStyle: 'my_animation 5.5s 10s'
+          };
+
+          var animator = $animateCss(element, options);
+
+          animator.start();
+          triggerAnimationStartFrame();
+
+          expect(element.css(prefix + 'animation-delay')).toEqual('10s');
+          expect(element.css(prefix + 'animation-duration')).toEqual('5.5s');
+          expect(element.css(prefix + 'animation-name')).toEqual('my_animation');
+        }));
       });
 
       describe("[from] and [to]", function() {
