refactor($animateCss): use $animateRunner

Author: matsko

src/ngAnimate/animateCss.js

@@ -42,8 +42,7 @@ var ONE_SECOND = 1000;
 var BASE_TEN = 10;
 
 function computeCSSStyles($window, element, properties) {
-  var styles = {};
-
+  var styles = Object.create(null);
   var detectedStyles = $window.getComputedStyle(element) || {};
   forEach(properties, function(style, prop) {
     var val = detectedStyles[style];
@@ -61,9 +60,7 @@ function computeCSSStyles($window, element, properties) {
 
 function parseMaxTime(str) {
   var maxValue = 0;
-  var values = isString(str) ?
-    str.split(/\s*,\s*/) :
-    [];
+  var values = str.split(/\s*,\s*/);
   forEach(values, function(value) {
     maxValue = Math.max(parseFloat(value) || 0, maxValue);
   });
@@ -90,15 +87,15 @@ function getCssDelayStyle(delay, isKeyframeAnimation) {
   return [prop, delay + 's'];
 }
 
-function blockTransitions(node, bool) {
-  var value = bool ? 'none' : '';
+function blockTransitions(node, applyBlock) {
+  var value = applyBlock ? 'none' : '';
   var key = TRANSITION_PROP + PROPERTY_KEY;
   applyInlineStyle(node, key, value);
   return [key, value];
 }
 
-function blockAnimations(node, bool) {
-  var value = bool ? 'paused' : '';
+function blockAnimations(node, applyBlock) {
+  var value = applyBlock ? 'paused' : '';
   var key = ANIMATION_PROP + ANIMATION_PLAYSTATE_KEY;
   applyInlineStyle(node, key, value);
   return [key, value];
@@ -112,8 +109,8 @@ function applyInlineStyle(node, key, value) {
   node.style[key] = value;
 }
 
-function LocalCacheLookup() {
-  var cache = {};
+function createLocalCacheLookup() {
+  var cache = Object.create(null);
   return {
     flush: function() {
       cache = {};
@@ -131,17 +128,17 @@ function LocalCacheLookup() {
 
     put: function(key, value) {
       if (!cache[key]) {
-        cache[key] = { total: 0 };
+        cache[key] = { total: 1, value: value };
+      } else {
+        cache[key].total++;
       }
-      cache[key].total++;
-      cache[key].value = value;
     }
   };
 }
 
 var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
-  var gcsLookup = new LocalCacheLookup();
-  var gcsStaggerLookup = new LocalCacheLookup();
+  var gcsLookup = createLocalCacheLookup();
+  var gcsStaggerLookup = createLocalCacheLookup();
 
   this.$get = ['$window', '$$jqLite', '$animateRunner', '$timeout',
                 '$document', '$$animateOptions', '$sniffer', '$$rAF',
@@ -161,8 +158,8 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
 
       if (!timings) {
         timings = computeCSSStyles($window, node, properties);
-        if (timings.animationIterationCount) {
-          timings.animationIterationCount = parseInt(timings.animationIterationCount || 1, BASE_TEN);
+        if(timings.animationIterationCount === 'infinite') {
+          timings.animationIterationCount = 1;
         }
       }
 
@@ -173,12 +170,13 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
     }
 
     function computeCachedCSSStaggerStyles(node, className, cacheKey, properties) {
-      var stagger = {};
-      var isRepeated = gcsLookup.count(cacheKey) > 0;
+      var stagger;
 
-      if (isRepeated) {
-        var staggerCacheKey = cacheKey + '-stagger';
-        stagger = gcsStaggerLookup.get(staggerCacheKey);
+      // if we have one or more existing matches of matching elements
+      // containing the same parent + CSS styles (which is how cacheKey works)
+      // then staggering is possible
+      if (gcsLookup.count(cacheKey) > 0) {
+        stagger = gcsStaggerLookup.get(cacheKey);
 
         if (!stagger) {
           var staggerClassName = pendClasses(className, '-stagger');
@@ -189,18 +187,21 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
 
           $$jqLite.removeClass(node, staggerClassName);
 
-          gcsStaggerLookup.put(staggerCacheKey, stagger);
+          gcsStaggerLookup.put(cacheKey, stagger);
         }
       }
 
-      return stagger;
+      return stagger || {};
     }
 
-    var cancelLastRAFRequest, bod = $document[0].body;
+    var bod = $document[0].body;
+    var cancelLastRAFRequest;
+    var rafWaitQueue = [];
     function waitUntilQuiet(callback) {
       if (cancelLastRAFRequest) {
         cancelLastRAFRequest(); //cancels the request
       }
+      rafWaitQueue.push(callback);
       cancelLastRAFRequest = $$rAF(function() {
         cancelLastRAFRequest = null;
         gcsLookup.flush();
@@ -212,7 +213,10 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
         //ensure that the the preparation animation is properly flushed so that
         //the active state picks up from there. DO NOT REMOVE THIS LINE.
         var a = bod.offsetWidth + 1;
-        callback();
+        forEach(rafWaitQueue, function(cb) {
+          cb();
+        });
+        rafWaitQueue.length = 0;
       });
     }
 
@@ -262,7 +266,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
       // class-based animations so that we can avoid applying CSS blocking on
       // the element to allow for normal transitions to work (this is how enter,
       // leave and move can perform the `ng-EVENT` methods without causing an
-      // unpected transition animation to occur).
+      // unexpected transition animation to occur).
       var structural = method &&
                         [' setClass ', ' addClass ',' removeClass '].indexOf(' ' + method + ' ') == -1;
 
@@ -508,7 +512,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
 
         // if the preparation function fails then the promise is not setup
         if (runner) {
-          rejected ? runner.end() : runner.cancel();
+          runner.complete(!rejected);
         }
       }
 
@@ -526,16 +530,16 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
         if (animationClosed) return;
 
         var startTime, events = [];
-        var playPause = function(bool) {
+        var playPause = function(playAnimation) {
           if (!animationCompleted) {
-            animationPaused = !bool;
+            animationPaused = !playAnimation;
             if (timings.animationDuration) {
               var value = blockAnimations(node, animationPaused);
               animationPaused
                   ? temporaryStyles.push(value)
                   : removeFromArray(temporaryStyles, value);
             }
-          } else if (animationPaused && bool) {
+          } else if (animationPaused && playAnimation) {
             animationPaused = false;
             close();
           }

src/ngAnimate/animateQueue.js

@@ -58,9 +58,9 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
   });
 
   this.$get = ['$qRaf', '$$rAF', '$rootScope', '$rootElement', '$document', '$$HashMap',
-               '$$animation', '$$animateRunner', '$templateRequest', '$$animateOptions',
+               '$$animation', '$animateRunner', '$templateRequest', '$$animateOptions',
        function($qRaf,   $$rAF,   $rootScope,   $rootElement,   $document,   $$HashMap,
-                $$animation,   $$animateRunner,   $templateRequest,   $$animateOptions) {
+                $$animation,   $animateRunner,   $templateRequest,   $$animateOptions) {
 
     var activeAnimationsLookup = new $$HashMap(); // jshint ignore:line
     var disabledElementsLookup = new $$HashMap(); // jshint ignore:line

src/ngAnimate/animation.js

@@ -20,8 +20,8 @@ var $$AnimationProvider = ['$animateProvider', function($animateProvider) {
     return element.data(RUNNER_STORAGE_KEY);
   }
 
-  this.$get = ['$qRaf', '$$jqLite', '$rootScope', '$injector', '$$animateRunner', '$$animateOptions',
-       function($qRaf,   $$jqLite,   $rootScope,   $injector,   $$animateRunner,   $$animateOptions) {
+  this.$get = ['$qRaf', '$$jqLite', '$rootScope', '$injector', '$animateRunner', '$$animateOptions',
+       function($qRaf,   $$jqLite,   $rootScope,   $injector,   $animateRunner,   $$animateOptions) {
 
     var animationQueue = [];