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

matsko · petebacondarwin · commit e0e1b5208767 · 2015-05-23T19:51:21.000+01:00
Closes angular#11723 Closes angular#11852
diff --git a/src/ngAnimate/animateCss.js b/src/ngAnimate/animateCss.js
@@ -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;
       }
 
diff --git 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('<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) {
 

Original file line number	Diff line number	Diff line change
`@@ -660,7 +660,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {`
`660`	`660`	`// we need to recalculate the delay value since we used a pre-emptive negative`
`661`	`661`	`// delay value and the delay value is required for the final event checking. This`
`662`	`662`	`// property will ensure that this will happen after the RAF phase has passed.`
`663`		`- if (timings.transitionDuration > 0) {`
	`663`	`+ if (options.duration == null && timings.transitionDuration > 0) {`
`664`	`664`	`flags.recalculateTimingStyles = flags.recalculateTimingStyles \|\| isFirst;`
`665`	`665`	`}`
`666`	`666`