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

Closes #11723

Author: matsko

src/ngAnimate/animateCss.js

@@ -626,7 +626,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 = {};
@@ -665,7 +665,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;
       }
 
@@ -742,6 +742,9 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
         applyAnimationClasses(element, options);
         applyAnimationStyles(element, options);
 
+        // we increment the counter so that if the same element is animated
+        // then the existing cache will not apply to it
+
         // the reason why we have this option is to allow a synchronous closing callback
         // that is fired as SOON as the animation ends (when the CSS is removed) or if
         // the animation never takes off at all. A good example is a leave animation since
@@ -854,7 +857,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) {
@@ -871,7 +874,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,47 @@ 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) {
+
+      var element = jqLite('<div></div>');
+      element.attr('class', '');
+
+      $rootElement.append(element);
+      jqLite($document[0].body).append($rootElement);
+
+      var runner = $animateCss(element, {
+        duration: 0.5,
+        to: { background: 'red' }
+      }).start();
+
+      triggerAnimationStartFrame();
+      expect(element.attr('style')).toContain('transition');
+
+      browserTrigger(element, 'transitionend',
+        { timeStamp: Date.now(), elapsedTime: 0.5 });
+
+      expect(element.attr('style')).not.toContain('transition');
+
+      runner = $animateCss(element, {
+        duration: 0.8,
+        to: { background: 'blue' }
+      }).start();
+
+      triggerAnimationStartFrame();
+      expect(element.attr('style')).toContain('transition');
+
+      browserTrigger(element, 'transitionend',
+        { timeStamp: Date.now(), elapsedTime: 0.5 });
+
+      expect(element.attr('style')).toContain('transition');
+
+      browserTrigger(element, 'transitionend',
+        { timeStamp: Date.now(), elapsedTime: 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) {