diff options
| -rw-r--r-- | src/ngAnimate/animate.js | 12 | ||||
| -rw-r--r-- | test/ngAnimate/animateSpec.js | 30 |
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) { |