fix($animateCss): ensure that custom durations do not confuse the gcs cache

Closes #11723

Author: matsko

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) {

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('<div></div>');
+      $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) {