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

Commit

Permalink
refactor($animate): queue all successive animations to use only one r…
Browse files Browse the repository at this point in the history
…eflow
  • Loading branch information
matsko authored and mhevery committed Oct 11, 2013
1 parent 3f31a7c commit 23c6988
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 20 deletions.
29 changes: 22 additions & 7 deletions src/ngAnimate/animate.js
Original file line number Diff line number Diff line change
Expand Up @@ -569,7 +569,7 @@ angular.module('ngAnimate', ['ng'])
}
}]);

$animateProvider.register('', ['$window', '$sniffer', function($window, $sniffer) {
$animateProvider.register('', ['$window', '$sniffer', '$timeout', function($window, $sniffer, $timeout) {
var forEach = angular.forEach;

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

var animationReflowQueue = [], animationTimer, timeOut = false;
function afterReflow(callback) {
animationReflowQueue.push(callback);
$timeout.cancel(animationTimer);
animationTimer = $timeout(function() {
angular.forEach(animationReflowQueue, function(fn) {
fn();
});
animationReflowQueue = [];
animationTimer = null;
}, 10, false);
}

function animate(element, className, done) {
if(['ng-enter','ng-leave','ng-move'].indexOf(className) == -1) {
var existingDuration = 0;
Expand Down Expand Up @@ -670,13 +683,15 @@ angular.module('ngAnimate', ['ng'])
});

// This triggers a reflow which allows for the transition animation to kick in.
element.prop('clientWidth');

This comment has been minimized.

Copy link
@cburgdorf

cburgdorf Feb 11, 2014

Contributor

I noticed this was ditched with the queuing of animations. I just wonder, wouldn't it be more reliable to still use element.prop('clientWidth') even with the queue?

This comment has been minimized.

Copy link
@matsko

matsko Feb 11, 2014

Author Contributor

That's right. We may more than likely need to combine both rAF and that together (just like you said) in order to avoid running blockTransitions and this will help get around that.

You'll see at the end of the week.

This comment has been minimized.

Copy link
@cburgdorf

cburgdorf Feb 11, 2014

Contributor

Ah, great! Will take a look once it landed 👍

if(transitionDuration > 0) {
node.style[transitionProp + propertyKey] = '';
}
element.addClass(activeClassName);

var css3AnimationEvents = animationendEvent + ' ' + transitionendEvent;

afterReflow(function() {
if(transitionDuration > 0) {
node.style[transitionProp + propertyKey] = '';
}
element.addClass(activeClassName);
});

element.on(css3AnimationEvents, onAnimationProgress);

// This will automatically be called by $animate so
Expand Down
Loading

0 comments on commit 23c6988

Please sign in to comment.