diff options
Diffstat (limited to 'src/ngAnimate/animate.js')
| -rw-r--r-- | src/ngAnimate/animate.js | 46 |
1 files changed, 27 insertions, 19 deletions
diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js index 5aed6832..ee637b3b 100644 --- a/src/ngAnimate/animate.js +++ b/src/ngAnimate/animate.js @@ -600,40 +600,43 @@ angular.module('ngAnimate', ['ng']) element.addClass(className); //we want all the styles defined before and after - var transitionTime = 0, - animationTime = 0; + var transitionDuration = 0, + animationDuration = 0, + transitionDelay = 0, + animationDelay = 0; forEach(element, function(element) { if (element.nodeType == ELEMENT_NODE) { var elementStyles = $window.getComputedStyle(element) || {}; - var transitionDelay = parseMaxTime(elementStyles[transitionProp + delayKey]); + transitionDelay = Math.max(parseMaxTime(elementStyles[transitionProp + delayKey]), transitionDelay); - var animationDelay = parseMaxTime(elementStyles[animationProp + delayKey]); + animationDelay = Math.max(parseMaxTime(elementStyles[animationProp + delayKey]), animationDelay); - var transitionDuration = parseMaxTime(elementStyles[transitionProp + durationKey]); + transitionDuration = Math.max(parseMaxTime(elementStyles[transitionProp + durationKey]), transitionDuration); - var animationDuration = parseMaxTime(elementStyles[animationProp + durationKey]); + var aDuration = parseMaxTime(elementStyles[animationProp + durationKey]); - if(animationDuration > 0) { - animationDuration *= parseInt(elementStyles[animationProp + animationIterationCountKey]) || 1; + if(aDuration > 0) { + aDuration *= parseInt(elementStyles[animationProp + animationIterationCountKey]) || 1; } - transitionTime = Math.max(transitionDelay + transitionDuration, transitionTime); - animationTime = Math.max(animationDelay + animationDuration, animationTime); + animationDuration = Math.max(aDuration, animationDuration); } }); /* there is no point in performing a reflow if the animation timeout is empty (this would cause a flicker bug normally - in the page */ - var maxTime = Math.max(transitionTime,animationTime) * 1000; - if(maxTime > 0) { - var node = element[0], - startTime = Date.now(); + in the page. There is also no point in performing an animation + that only has a delay and no duration */ + var maxDuration = Math.max(transitionDuration, animationDuration); + if(maxDuration > 0) { + var maxDelayTime = Math.max(transitionDelay, animationDelay) * 1000, + startTime = Date.now(), + node = element[0]; //temporarily disable the transition so that the enter styles //don't animate twice (this is here to avoid a bug in Chrome/FF). - if(transitionTime > 0) { + if(transitionDuration > 0) { node.style[transitionProp + propertyKey] = 'none'; } @@ -644,7 +647,7 @@ angular.module('ngAnimate', ['ng']) // This triggers a reflow which allows for the transition animation to kick in. element.prop('clientWidth'); - if(transitionTime > 0) { + if(transitionDuration > 0) { node.style[transitionProp + propertyKey] = ''; } element.addClass(activeClassName); @@ -678,8 +681,13 @@ angular.module('ngAnimate', ['ng']) var ev = event.originalEvent || event; /* $manualTimeStamp is a mocked timeStamp value which is set * within browserTrigger(). This is only here so that tests can - * mock animations properly. Real events fallback to event.timeStamp. */ - if((ev.$manualTimeStamp || ev.timeStamp) - startTime >= maxTime) { + * mock animations properly. Real events fallback to event.timeStamp. + * We're checking to see if the timestamp surpasses the expected delay, + * but we're using elapsedTime instead of the timestamp on the 2nd + * pre-condition since animations sometimes close off early */ + if((ev.$manualTimeStamp || ev.timeStamp) - startTime >= maxDelayTime && + ev.elapsedTime >= maxDuration) { + done(); } } |
