diff options
| -rw-r--r-- | src/ngAnimate/animate.js | 12 | ||||
| -rw-r--r-- | test/ngAnimate/animateSpec.js | 25 |
2 files changed, 37 insertions, 0 deletions
diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js index 1956d54c..4d3a5878 100644 --- a/src/ngAnimate/animate.js +++ b/src/ngAnimate/animate.js @@ -1002,6 +1002,8 @@ angular.module('ngAnimate', ['ng']) element.addClass(NG_ANIMATE_FALLBACK_CLASS_NAME); activeClassName += NG_ANIMATE_FALLBACK_ACTIVE_CLASS_NAME + ' '; blockTransitions(element); + } else { + blockKeyframeAnimations(element); } forEach(className.split(' '), function(klass, i) { @@ -1025,6 +1027,10 @@ angular.module('ngAnimate', ['ng']) element[0].style[TRANSITION_PROP + PROPERTY_KEY] = 'none'; } + function blockKeyframeAnimations(element) { + element[0].style[ANIMATION_PROP] = 'none 0s'; + } + function unblockTransitions(element) { var node = element[0], prop = TRANSITION_PROP + PROPERTY_KEY; if(node.style[prop] && node.style[prop].length > 0) { @@ -1032,6 +1038,10 @@ angular.module('ngAnimate', ['ng']) } } + function unblockKeyframeAnimations(element) { + element[0].style[ANIMATION_PROP] = ''; + } + function animateRun(element, className, activeAnimationComplete) { var data = element.data(NG_ANIMATE_CSS_DATA_KEY); if(!element.hasClass(className) || !data) { @@ -1059,6 +1069,8 @@ angular.module('ngAnimate', ['ng']) style += CSS_PREFIX + 'transition-property: ' + propertyStyle + ', ' + fallbackProperty + '; '; style += CSS_PREFIX + 'transition-duration: ' + timings.transitionDurationStyle + ', ' + timings.transitionDuration + 's; '; } + } else { + unblockKeyframeAnimations(element); } if(ii > 0) { diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js index 2362576a..cbf9de63 100644 --- a/test/ngAnimate/animateSpec.js +++ b/test/ngAnimate/animateSpec.js @@ -2696,4 +2696,29 @@ describe("ngAnimate", function() { expect(capturedProperty).not.toBe('none'); })); + it('should block and unblock keyframe animations around the reflow operation', + inject(function($rootScope, $compile, $rootElement, $document, $animate, $sniffer, $timeout) { + + if (!$sniffer.animations) return; + + $animate.enabled(true); + + ss.addRule('.cross-animation', '-webkit-animation:1s my_animation;' + + 'animation:1s my_animation;'); + + var element = $compile('<div class="cross-animation"></div>')($rootScope); + $rootElement.append(element); + jqLite($document[0].body).append($rootElement); + + var node = element[0]; + var animationKey = $sniffer.vendorPrefix == 'Webkit' ? 'WebkitAnimation' : 'animation'; + + $animate.addClass(element, 'trigger-class'); + + expect(node.style[animationKey]).toContain('none'); + + $timeout.flush(); + + expect(node.style[animationKey]).not.toContain('none'); + })); }); |