Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 23c6988

Browse files
matskomhevery
authored andcommitted
refactor($animate): queue all successive animations to use only one reflow
1 parent 3f31a7c commit 23c6988

File tree

2 files changed

+98
-20
lines changed

2 files changed

+98
-20
lines changed

src/ngAnimate/animate.js

+22-7
Original file line numberDiff line numberDiff line change
@@ -569,7 +569,7 @@ angular.module('ngAnimate', ['ng'])
569569
}
570570
}]);
571571

572-
$animateProvider.register('', ['$window', '$sniffer', function($window, $sniffer) {
572+
$animateProvider.register('', ['$window', '$sniffer', '$timeout', function($window, $sniffer, $timeout) {
573573
var forEach = angular.forEach;
574574

575575
// Detect proper transitionend/animationend event names.
@@ -605,6 +605,19 @@ angular.module('ngAnimate', ['ng'])
605605
animationIterationCountKey = 'IterationCount',
606606
ELEMENT_NODE = 1;
607607

608+
var animationReflowQueue = [], animationTimer, timeOut = false;
609+
function afterReflow(callback) {
610+
animationReflowQueue.push(callback);
611+
$timeout.cancel(animationTimer);
612+
animationTimer = $timeout(function() {
613+
angular.forEach(animationReflowQueue, function(fn) {
614+
fn();
615+
});
616+
animationReflowQueue = [];
617+
animationTimer = null;
618+
}, 10, false);
619+
}
620+
608621
function animate(element, className, done) {
609622
if(['ng-enter','ng-leave','ng-move'].indexOf(className) == -1) {
610623
var existingDuration = 0;
@@ -670,13 +683,15 @@ angular.module('ngAnimate', ['ng'])
670683
});
671684

672685
// This triggers a reflow which allows for the transition animation to kick in.
673-
element.prop('clientWidth');
674-
if(transitionDuration > 0) {
675-
node.style[transitionProp + propertyKey] = '';
676-
}
677-
element.addClass(activeClassName);
678-
679686
var css3AnimationEvents = animationendEvent + ' ' + transitionendEvent;
687+
688+
afterReflow(function() {
689+
if(transitionDuration > 0) {
690+
node.style[transitionProp + propertyKey] = '';
691+
}
692+
element.addClass(activeClassName);
693+
});
694+
680695
element.on(css3AnimationEvents, onAnimationProgress);
681696

682697
// This will automatically be called by $animate so

0 commit comments

Comments
 (0)