diff --git a/src/ngAnimate/animateCss.js b/src/ngAnimate/animateCss.js index bcc17d2654d4..948b6dd40e29 100644 --- a/src/ngAnimate/animateCss.js +++ b/src/ngAnimate/animateCss.js @@ -621,7 +621,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) { var timings = computeTimings(node, fullClassName, cacheKey); var relativeDelay = timings.maxDelay; - maxDelay = Math.max(relativeDelay, 0); + maxDelay = Math.max(relativeDelay, 0) || 0; maxDuration = timings.maxDuration; var flags = {}; @@ -660,7 +660,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) { // we need to recalculate the delay value since we used a pre-emptive negative // delay value and the delay value is required for the final event checking. This // property will ensure that this will happen after the RAF phase has passed. - if (timings.transitionDuration > 0) { + if (options.duration == null && timings.transitionDuration > 0) { flags.recalculateTimingStyles = flags.recalculateTimingStyles || isFirst; } @@ -849,7 +849,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) { timings = computeTimings(node, fullClassName, cacheKey); relativeDelay = timings.maxDelay; - maxDelay = Math.max(relativeDelay, 0); + maxDelay = Math.max(relativeDelay, 0) || 0; maxDuration = timings.maxDuration; if (maxDuration === 0) { @@ -866,7 +866,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) { ? parseFloat(options.delay) : relativeDelay; - maxDelay = Math.max(relativeDelay, 0); + maxDelay = Math.max(relativeDelay, 0) || 0; var delayStyle; if (flags.applyTransitionDelay) { diff --git a/test/ngAnimate/animateCssSpec.js b/test/ngAnimate/animateCssSpec.js index cbeb3bf72580..6bed68a9b26e 100644 --- a/test/ngAnimate/animateCssSpec.js +++ b/test/ngAnimate/animateCssSpec.js @@ -1203,6 +1203,43 @@ describe("ngAnimate $animateCss", function() { }); }); + it('should avoid applying the same cache to an element a follow-up animation is run on the same element', + inject(function($animateCss, $rootElement, $document) { + + function endTransition(element, elapsedTime) { + browserTrigger(element, 'transitionend', + { timeStamp: Date.now(), elapsedTime: elapsedTime }); + } + + function startAnimation(element, duration, color) { + $animateCss(element, { + duration: duration, + to: { background: color } + }).start(); + triggerAnimationStartFrame(); + } + + var element = jqLite('
'); + $rootElement.append(element); + jqLite($document[0].body).append($rootElement); + + startAnimation(element, 0.5, 'red'); + expect(element.attr('style')).toContain('transition'); + + endTransition(element, 0.5); + expect(element.attr('style')).not.toContain('transition'); + + startAnimation(element, 0.8, 'blue'); + expect(element.attr('style')).toContain('transition'); + + // Trigger an extra transitionend event that matches the original transition + endTransition(element, 0.5); + expect(element.attr('style')).toContain('transition'); + + endTransition(element, 0.8); + expect(element.attr('style')).not.toContain('transition'); + })); + it('should apply a custom temporary class when a non-structural animation is used', inject(function($animateCss, $rootElement, $document) {