feat($animate): use requestAnimationFrame instead of a timeout to iss…

…ue a reflow Closes angular#4278 Closes angular#4225
matsko · Jan 14, 2014 · 084cf11 · 084cf11
1 parent 3f616bd
commit 084cf11
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 79 deletions.
diff --git a/karma-docs.conf.js b/karma-docs.conf.js
@@ -10,12 +10,12 @@ module.exports = function(config) {
 
       'build/angular.js',
       'build/angular-cookies.js',
-      'build/angular-mocks.js',
       'build/angular-resource.js',
       'build/angular-touch.js',
       'build/angular-sanitize.js',
       'build/angular-route.js',
       'build/angular-animate.js',
+      'build/angular-mocks.js',
 
       'build/docs/components/lunr.js',
       'build/docs/components/google-code-prettify.js',

diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js
@@ -248,6 +248,28 @@ angular.module('ngAnimate', ['ng'])
    * Please visit the {@link ngAnimate `ngAnimate`} module overview page learn more about how to use animations in your application.
    *
    */
+  .factory('$$animateReflow', ['$window', '$timeout', function($window, $timeout) {
+    var requestAnimationFrame = $window.requestAnimationFrame       ||
+                                $window.mozRequestAnimationFrame    ||
+                                $window.webkitRequestAnimationFrame ||
+                                function(fn) {
+                                  return $timeout(fn, 10, false);
+                                };
+
+    var cancelAnimationFrame = $window.cancelAnimationFrame       ||
+                               $window.mozCancelAnimationFrame    ||
+                               $window.webkitCancelAnimationFrame ||
+                               function(timer) {
+                                 return $timeout.cancel(timer);
+                               };
+    return function(fn) {
+      var id = requestAnimationFrame(fn);
+      return function() {
+        cancelAnimationFrame(id);
+      };
+    };
+  }])
+
   .config(['$provide', '$animateProvider', function($provide, $animateProvider) {
     var noop = angular.noop;
     var forEach = angular.forEach;
@@ -860,7 +882,8 @@ angular.module('ngAnimate', ['ng'])
       }
     }]);
 
-    $animateProvider.register('', ['$window', '$sniffer', '$timeout', function($window, $sniffer, $timeout) {
+    $animateProvider.register('', ['$window', '$sniffer', '$timeout', '$$animateReflow',
+                           function($window,   $sniffer,   $timeout,   $$animateReflow) {
       // Detect proper transitionend/animationend event names.
       var CSS_PREFIX = '', TRANSITION_PROP, TRANSITIONEND_EVENT, ANIMATION_PROP, ANIMATIONEND_EVENT;
 
@@ -905,11 +928,13 @@ angular.module('ngAnimate', ['ng'])
       var parentCounter = 0;
       var animationReflowQueue = [];
       var animationElementQueue = [];
-      var animationTimer;
+      var cancelAnimationReflow;
       var closingAnimationTime = 0;
       var timeOut = false;
       function afterReflow(element, callback) {
-        $timeout.cancel(animationTimer);
+        if(cancelAnimationReflow) {
+          cancelAnimationReflow();
+        }
 
         animationReflowQueue.push(callback);
 
@@ -930,7 +955,7 @@ angular.module('ngAnimate', ['ng'])
         //a follow-up animation is midway in its animation
         elementData.animationCount = animationCounter;
 
-        animationTimer = $timeout(function() {
+        cancelAnimationReflow = $$animateReflow(function() {
           forEach(animationReflowQueue, function(fn) {
             fn();
           });
@@ -951,11 +976,11 @@ angular.module('ngAnimate', ['ng'])
 
           animationReflowQueue = [];
           animationElementQueue = [];
-          animationTimer = null;
+          cancelAnimationReflow = null;
           lookupCache = {};
           closingAnimationTime = 0;
           animationCounter++;
-        }, 10, false);
+        });
       }
 
       function closeAllAnimations(elements, count) {

diff --git a/src/ngMock/angular-mocks.js b/src/ngMock/angular-mocks.js
@@ -756,6 +756,26 @@ angular.mock.TzDate = function (offset, timestamp) {
 angular.mock.TzDate.prototype = Date.prototype;
 /* jshint +W101 */
 
+angular.module('ngAnimate').config(['$provide', function($provide) {
+  var reflowQueue = [];
+  $provide.value('$$animateReflow', function(fn) {
+    reflowQueue.push(fn);
+    return angular.noop;
+  });
+  $provide.decorator('$animate', function($delegate) {
+    $delegate.triggerReflow = function() {
+      if(reflowQueue.length === 0) {
+        throw new Error('No animation reflows present');
+      }
+      angular.forEach(reflowQueue, function(fn) {
+        fn();
+      });
+      reflowQueue = [];
+    };
+    return $delegate;
+  });
+}]);
+
 angular.mock.animate = angular.module('mock.animate', ['ng'])
 
   .config(['$provide', function($provide) {
@@ -1913,7 +1933,6 @@ angular.mock.clearDataCache = function() {
 };
 
 
-
 if(window.jasmine || window.mocha) {
 
   var currentSpec = null,