fix($animator): ensure $animator calculates the highest duration + de…

…lay for and transitions and animations together
angular · May 31, 2013 · a4b9a6a · a4b9a6a
1 parent a2f9e78
commit a4b9a6a
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 18 deletions.
diff --git a/src/ng/animator.js b/src/ng/animator.js
@@ -345,28 +345,29 @@ var $AnimatorProvider = function() {
                 var ELEMENT_NODE = 1;
                 forEach(element, function(element) {
                   if (element.nodeType == ELEMENT_NODE) {
-                    var w3cProp = w3cTransitionProp,
-                        vendorProp = vendorTransitionProp,
-                        iterations = 1,
-                        elementStyles = $window.getComputedStyle(element) || {};
+                    var elementStyles = $window.getComputedStyle(element) || {};
 
-                    //use CSS Animations over CSS Transitions
-                    if(parseFloat(elementStyles[w3cAnimationProp + durationKey]) > 0 ||
-                       parseFloat(elementStyles[vendorAnimationProp + durationKey]) > 0) {
-                      w3cProp = w3cAnimationProp;
-                      vendorProp = vendorAnimationProp;
-                      iterations = Math.max(parseInt(elementStyles[w3cProp    + animationIterationCountKey]) || 0,
-                                            parseInt(elementStyles[vendorProp + animationIterationCountKey]) || 0,
-                                            iterations);
-                    }
+                    var transitionDelay     = Math.max(parseMaxTime(elementStyles[w3cTransitionProp     + delayKey]),
+                                                       parseMaxTime(elementStyles[vendorTransitionProp  + delayKey]));
+
+                    var animationDelay      = Math.max(parseMaxTime(elementStyles[w3cAnimationProp      + delayKey]),
+                                                       parseMaxTime(elementStyles[vendorAnimationProp   + delayKey]));
 
-                    var parsedDelay     = Math.max(parseMaxTime(elementStyles[w3cProp     + delayKey]),
-                                                   parseMaxTime(elementStyles[vendorProp  + delayKey]));
+                    var transitionDuration  = Math.max(parseMaxTime(elementStyles[w3cTransitionProp     + durationKey]),
+                                                       parseMaxTime(elementStyles[vendorTransitionProp  + durationKey]));
 
-                    var parsedDuration  = Math.max(parseMaxTime(elementStyles[w3cProp     + durationKey]),
-                                                   parseMaxTime(elementStyles[vendorProp  + durationKey]));
+                    var animationDuration   = Math.max(parseMaxTime(elementStyles[w3cAnimationProp      + durationKey]),
+                                                       parseMaxTime(elementStyles[vendorAnimationProp   + durationKey]));
+
+                    if(animationDuration > 0) {
+                      animationDuration *= Math.max(parseInt(elementStyles[w3cAnimationProp    + animationIterationCountKey]) || 0,
+                                                   parseInt(elementStyles[vendorAnimationProp + animationIterationCountKey]) || 0,
+                                                   1);
+                    }
 
-                    duration = Math.max(parsedDelay + (iterations * parsedDuration), duration);
+                    duration = Math.max(animationDelay  + animationDuration,
+                                        transitionDelay + transitionDuration,
+                                        duration);
                   }
                 });
                 $window.setTimeout(done, duration * 1000);

diff --git a/test/ng/animatorSpec.js b/test/ng/animatorSpec.js
@@ -666,6 +666,33 @@ describe("$animator", function() {
           expect(element[0].style.display).toBe('');
       }));
 
+      it("should select the highest duration and delay",
+        inject(function($animator, $rootScope, $compile, $sniffer) {
+          var styles = 'transition:1s linear all 2s;' + 
+                       vendorPrefix + 'transition:1s linear all 2s;' + 
+                       'animation:my_ani 10s 1s;' + 
+                       vendorPrefix + 'animation:my_ani 10s 1s;';
+
+          element = $compile(html('<div style="' + styles + '">foo</div>'))($rootScope);
+
+          var animator = $animator($rootScope, {
+            ngAnimate : '{show: \'inline-show\'}'
+          });
+
+          element.css('display','none');
+          expect(element.css('display')).toBe('none');
+
+          animator.show(element);
+          if ($sniffer.transitions) {
+            window.setTimeout.expect(1).process();
+            window.setTimeout.expect(11000).process();
+          }
+          else {
+            expect(window.setTimeout.queue.length).toBe(0);
+          }
+          expect(element[0].style.display).toBe('');
+      }));
+
       it("should finish the previous transition when a new animation is started",
         inject(function($animator, $rootScope, $compile, $sniffer) {
           var style = 'transition: 1s linear all;' +