fix($animate): ensure transition-property is not changed when only keyframe animations are in use

Closes #3933

2 files changed, 38 insertions, 4 deletions

diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js
index af607568..7f37f143 100644
--- a/src/ngAnimate/animate.js
+++ b/src/ngAnimate/animate.js
@@ -627,8 +627,10 @@ angular.module('ngAnimate', ['ng'])
 
           //temporarily disable the transition so that the enter styles
           //don't animate twice (this is here to avoid a bug in Chrome/FF).
-          node.style[w3cTransitionProp + propertyKey] = 'none';
-          node.style[vendorTransitionProp + propertyKey] = 'none';
+          if(transitionTime > 0) {
+            node.style[w3cTransitionProp + propertyKey] = 'none';
+            node.style[vendorTransitionProp + propertyKey] = 'none';
+          }
 
           var activeClassName = '';
           forEach(className.split(' '), function(klass, i) {
@@ -637,8 +639,10 @@ angular.module('ngAnimate', ['ng'])
 
           //this triggers a reflow which allows for the transition animation to kick in
           element.prop('clientWidth');
-          node.style[w3cTransitionProp + propertyKey] = '';
-          node.style[vendorTransitionProp + propertyKey] = '';
+          if(transitionTime > 0) {
+            node.style[w3cTransitionProp + propertyKey] = '';
+            node.style[vendorTransitionProp + propertyKey] = '';
+          }
           element.addClass(activeClassName);
 
           var css3AnimationEvents = [w3cAnimationEvent,  vendorAnimationEvent,
diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
index adedeac4..a3a1d0b0 100644
--- a/test/ngAnimate/animateSpec.js
+++ b/test/ngAnimate/animateSpec.js
@@ -1270,6 +1270,36 @@ describe("ngAnimate", function() {
     expect(child.hasClass('ng-enter-active')).toBe(false);
   }));
 
+  it("should not set the transition property flag if only CSS animations are used",
+    inject(function($compile, $rootScope, $animate, $sniffer) {
+
+    if (!$sniffer.animations) return;
+
+    ss.addRule('.ani.ng-enter', 'my_animation 2s linear;' +
+      vendorPrefix + 'animation: my_animation 2s linear');
+
+    ss.addRule('.trans.ng-enter',  'transition:1s linear all;' +
+                    vendorPrefix + 'transition:1s linear all');
+
+    var element = html($compile('<div>...</div>')($rootScope));
+    var child = $compile('<div class="ani">...</div>')($rootScope);
+    child.css('transition-property','background-color');
+
+    $animate.enter(child, element);
+    $rootScope.$digest();
+
+    browserTrigger(child,'transitionend', { timeStamp: Date.now() + 2000 });
+
+    expect(child.css('transition-property')).toBe('background-color');
+    child.remove();
+
+    child.attr('class','trans');
+    $animate.enter(child, element);
+    $rootScope.$digest();
+
+    expect(child.css('transition-property')).not.toBe('background-color');
+  }));
+
   it("should skip animations if the browser does not support CSS3 transitions and CSS3 animations",
     inject(function($compile, $rootScope, $animate, $sniffer) {