From 914dc4807ab32d8060545b91aa26e58b5dcf3252 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Mon, 13 Jul 2015 17:27:33 -0700
Subject: [PATCH 1/2] fix($animateCss): ensure animations execute if only a
 keyframeStyle is provided

`$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 #12124
Closes #12340
---
 src/ngAnimate/animateCss.js      |  3 ++-
 test/ngAnimate/animateCssSpec.js | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/ngAnimate/animateCss.js b/src/ngAnimate/animateCss.js
index 50a842717f29..aa944d5c5f7c 100644
--- a/src/ngAnimate/animateCss.js
+++ b/src/ngAnimate/animateCss.js
@@ -556,10 +556,11 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
       var fullClassName = classes + ' ' + setupClasses;
       var activeClasses = pendClasses(setupClasses, '-active');
       var hasToStyles = styles.to && Object.keys(styles.to).length > 0;
+      var containsKeyframeAnimation = (options.keyframeStyle || '').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) {
+      if (!containsKeyframeAnimation && !hasToStyles && !setupClasses) {
         return closeAndReturnNoopAnimator();
       }
 
diff --git a/test/ngAnimate/animateCssSpec.js b/test/ngAnimate/animateCssSpec.js
index 6bed68a9b26e..b53c981b8526 100644
--- a/test/ngAnimate/animateCssSpec.js
+++ b/test/ngAnimate/animateCssSpec.js
@@ -2167,6 +2167,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() {

From 3262d45e768b5f22914203ad6ad213695b4e79e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Mon, 13 Jul 2015 17:38:05 -0700
Subject: [PATCH 2/2] test($animateCss): ensure that `transitionStyle` by
 itself doesn't trigger anything

Using `transitionStyle` without any other properties does not trigger an
animation so we could have a test to assert that it doesn't do that.
---
 src/ngAnimate/animateCss.js      |  5 ++++-
 test/ngAnimate/animateCssSpec.js | 25 ++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/ngAnimate/animateCss.js b/src/ngAnimate/animateCss.js
index aa944d5c5f7c..f7be35b85f57 100644
--- a/src/ngAnimate/animateCss.js
+++ b/src/ngAnimate/animateCss.js
@@ -560,7 +560,10 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
 
       // 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 (!containsKeyframeAnimation && !hasToStyles && !setupClasses) {
+      // is there a 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
index b53c981b8526..4a94b43f76f8 100644
--- a/test/ngAnimate/animateCssSpec.js
+++ b/test/ngAnimate/animateCssSpec.js
@@ -2017,7 +2017,7 @@ describe("ngAnimate $animateCss", function() {
         });
       });
 
-      describe("[transtionStyle]", function() {
+      describe("[transitionStyle]", function() {
         it("should apply the transition directly onto the element and animate accordingly",
           inject(function($animateCss, $rootElement) {
 
@@ -2092,6 +2092,29 @@ describe("ngAnimate $animateCss", function() {
           expect(element.css('transition-property')).toMatch('color');
           expect(style).toContain('ease-in');
         }));
+
+        it("should only execute the animation if any CSS to styles are mixed into together",
+          inject(function($animateCss, $rootElement) {
+
+          var options = {
+            transitionStyle: '6s 4s ease-out all'
+          };
+
+          $animateCss(element, options).start();
+          triggerAnimationStartFrame();
+
+          expect(element.css(prefix + 'transition-delay')).not.toEqual('4s');
+          expect(element.css(prefix + 'transition-duration')).not.toEqual('6s');
+          expect(element.css(prefix + 'transition-timing-function')).not.toEqual('ease-out');
+
+          options.to = { color: 'brown' };
+          $animateCss(element, options).start();
+          triggerAnimationStartFrame();
+
+          expect(element.css(prefix + 'transition-delay')).toEqual('4s');
+          expect(element.css(prefix + 'transition-duration')).toEqual('6s');
+          expect(element.css(prefix + 'transition-timing-function')).toEqual('ease-out');
+        }));
       });
 
       describe("[keyframeStyle]", function() {