fix(animation): handle transition-delay property correctly

The code also handles situations with multiple different
delay and duration values.

E.g. in the following example, the correct duration would
be 3 seconds:

property    |    duration    |   delay
height      |     1s         |   2s
left        |     2s         |   1s
opacity     |     1s         |   2s

Author: romiem

src/Angular.js

@@ -185,6 +185,10 @@ function reverseParams(iteratorFn) {
   return function(value, key) { iteratorFn(key, value) };
 }
 
+function safelySplitByComma(str){
+  return isUndefined(str) ? [] : str.split(',');
+}
+
 /**
  * A consistent way of creating unique IDs in angular. The ID is a sequence of alpha numeric
  * characters such as '012ABC'. The reason why we are not using simply a number counter is that

src/ng/animator.js

@@ -262,15 +262,19 @@ var $AnimatorProvider = function() {
               // keep at 1 for animation dom rerender
               $window.setTimeout(beginAnimation, 1);
 
-              function getMaxDuration(durationString){
-                if (isUndefined(durationString)){
-                  return 0;
-                }
-
-                var normalizedValues = map(durationString.split(','), function(val){
-                  return parseFloat(val);
-                });
-                return Math.max.apply(null, normalizedValues);
+              function getMaxDuration(durationString, delayString) {
+                var durations = safelySplitByComma(durationString),
+                    delays = safelySplitByComma(delayString),
+                    overallTimeSpent = 0;
+ 
+                  for (var i = 0, ii = Math.max(durations.length, delays.length); i < ii; i++) {
+                    var combinedDuration = (parseFloat(durations.shift() || 0) + parseFloat(delays.shift() || 0));
+                    if (combinedDuration > overallTimeSpent) {
+                      overallTimeSpent = combinedDuration;
+                    }
+                  }
+ 
+                  return overallTimeSpent;
               }
 
               function beginAnimation() {
@@ -281,14 +285,19 @@ var $AnimatorProvider = function() {
                   var vendorTransitionProp = $sniffer.vendorPrefix + 'Transition';
                   var w3cTransitionProp = 'transition'; //one day all browsers will have this
 
-                  var durationKey = 'Duration';
-                  var duration = 0;
+                  var durationKey = 'Duration',
+                      delayKey = 'Delay',
+                      duration = 0;
+                  
                   //we want all the styles defined before and after
                   forEach(element, function(element) {
                     var globalStyles = $window.getComputedStyle(element) || {};
                     duration = Math.max(
-                        getMaxDuration(globalStyles[w3cTransitionProp    + durationKey]) ||
-                        getMaxDuration(globalStyles[vendorTransitionProp + durationKey]) ||
+                        getMaxDuration(globalStyles[w3cTransitionProp    + durationKey],
+                                       globalStyles[w3cTransitionProp    + delayKey]) ||
+
+                        getMaxDuration(globalStyles[vendorTransitionProp + durationKey],
+                                       globalStyles[vendorTransitionProp + delayKey]) ||
                         0,
                         duration);
                   });

test/ng/animatorSpec.js

@@ -335,6 +335,36 @@ describe("$animator", function() {
       expect(element[0].style.display).toBe('');
     }));
 
+  it("should skip animations if disabled and run when enabled picking the longest specified duration/delay combination",
+    inject(function($animator, $rootScope, $compile, $sniffer) {
+      $animator.enabled(false);
+      element = $compile(html('<div style="' + vendorPrefix + 
+        'transition-duration: 1s, 2000ms, 1s; ' + vendorPrefix +
+        'transition-delay: 2s, 1000ms, 2s; ' + vendorPrefix + 
+        'transition-property: height, left, opacity">foo</div>'))($rootScope);
+
+      var animator = $animator($rootScope, {
+        ngAnimate : '{show: \'inline-show\'}'
+      });
+
+      element.css('display','none');
+      expect(element.css('display')).toBe('none');
+      animator.show(element);
+      expect(element[0].style.display).toBe('');
+
+      $animator.enabled(true);
+
+      element.css('display','none');
+      expect(element.css('display')).toBe('none');
+
+      animator.show(element);
+      if ($sniffer.supportsTransitions) {
+        window.setTimeout.expect(1).process();
+        window.setTimeout.expect(3000).process();
+      }
+      expect(element[0].style.display).toBe('');
+    }));
+
   });
 
   it("should throw an error when an invalid ng-animate syntax is provided", inject(function($compile, $rootScope) {