Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-17 07:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix($animate): perform internal caching on getComputedStyle to boost the performance of CSS3 transitions/animations

Browse source 
Closes #4011
Closes #4124
This commit is contained in:
Matias Niemelä 2013-10-09 01:12:03 -04:00 committed by Misko Hevery
parent 1438f1b626
commit b1e604e38c
2 changed files with 118 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
src/ngAnimate/animate.js
View file

@ -642,6 +642,10 @@ angular.module('ngAnimate', ['ng'])
animationIterationCountKey = 'IterationCount',
ELEMENT_NODE = 1;
var NG_ANIMATE_PARENT_KEY = '$ngAnimateKey';
var lookupCache = {};
var parentCounter = 0;
var animationReflowQueue = [], animationTimer, timeOut = false;
function afterReflow(callback) {
animationReflowQueue.push(callback);
@ -652,65 +656,93 @@ angular.module('ngAnimate', ['ng'])
});
animationReflowQueue = [];
animationTimer = null;
lookupCache = {};
}, 10, false);
}
function animate(element, className, done) {
if(['ng-enter','ng-leave','ng-move'].indexOf(className) == -1) {
var existingDuration = 0;
function getElementAnimationDetails(element, cacheKey, onlyCheckTransition) {
var data = lookupCache[cacheKey];
if(!data) {
var transitionDuration = 0, transitionDelay = 0,
animationDuration = 0, animationDelay = 0;
//we want all the styles defined before and after
forEach(element, function(element) {
if (element.nodeType == ELEMENT_NODE) {
var elementStyles = $window.getComputedStyle(element) || {};
existingDuration = Math.max(parseMaxTime(elementStyles[transitionProp + durationKey]),
existingDuration);
transitionDuration = Math.max(parseMaxTime(elementStyles[transitionProp + durationKey]), transitionDuration);
if(!onlyCheckTransition) {
transitionDelay = Math.max(parseMaxTime(elementStyles[transitionProp + delayKey]), transitionDelay);
animationDelay = Math.max(parseMaxTime(elementStyles[animationProp + delayKey]), animationDelay);
var aDuration = parseMaxTime(elementStyles[animationProp + durationKey]);
if(aDuration > 0) {
aDuration *= parseInt(elementStyles[animationProp + animationIterationCountKey]) || 1;
}
animationDuration = Math.max(aDuration, animationDuration);
}
}
});
if(existingDuration > 0) {
done();
return;
}
data = {
transitionDelay : transitionDelay,
animationDelay : animationDelay,
transitionDuration : transitionDuration,
animationDuration : animationDuration
};
lookupCache[cacheKey] = data;
}
return data;
}
function parseMaxTime(str) {
var total = 0, values = angular.isString(str) ? str.split(/\s*,\s*/) : [];
forEach(values, function(value) {
total = Math.max(parseFloat(value) || 0, total);
});
return total;
}
function getCacheKey(element) {
var parent = element.parent();
var parentID = parent.data(NG_ANIMATE_PARENT_KEY);
if(!parentID) {
parent.data(NG_ANIMATE_PARENT_KEY, ++parentCounter);
parentID = parentCounter;
}
return parentID + '-' + element[0].className;
}
function animate(element, className, done) {
var cacheKey = getCacheKey(element);
if(getElementAnimationDetails(element, cacheKey, true).transitionDuration > 0) {
done();
return;
}
element.addClass(className);
//we want all the styles defined before and after
var transitionDuration = 0,
animationDuration = 0,
transitionDelay = 0,
animationDelay = 0;
forEach(element, function(element) {
if (element.nodeType == ELEMENT_NODE) {
var elementStyles = $window.getComputedStyle(element) || {};
transitionDelay = Math.max(parseMaxTime(elementStyles[transitionProp + delayKey]), transitionDelay);
animationDelay = Math.max(parseMaxTime(elementStyles[animationProp + delayKey]), animationDelay);
transitionDuration = Math.max(parseMaxTime(elementStyles[transitionProp + durationKey]), transitionDuration);
var aDuration = parseMaxTime(elementStyles[animationProp + durationKey]);
if(aDuration > 0) {
aDuration *= parseInt(elementStyles[animationProp + animationIterationCountKey]) || 1;
}
animationDuration = Math.max(aDuration, animationDuration);
}
});
var timings = getElementAnimationDetails(element, cacheKey + ' ' + className);
/* there is no point in performing a reflow if the animation
timeout is empty (this would cause a flicker bug normally
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);
var maxDuration = Math.max(timings.transitionDuration, timings.animationDuration);
if(maxDuration > 0) {
var maxDelayTime = Math.max(transitionDelay, animationDelay) * 1000,
var maxDelayTime = Math.max(timings.transitionDelay, timings.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(transitionDuration > 0) {
if(timings.transitionDuration > 0) {
node.style[transitionProp + propertyKey] = 'none';
}
@ -723,7 +755,7 @@ angular.module('ngAnimate', ['ng'])
var css3AnimationEvents = animationendEvent + ' ' + transitionendEvent;
afterReflow(function() {
if(transitionDuration > 0) {
if(timings.transitionDuration > 0) {
node.style[transitionProp + propertyKey] = '';
}
element.addClass(activeClassName);
@ -768,13 +800,6 @@ angular.module('ngAnimate', ['ng'])
}
}
function parseMaxTime(str) {
var total = 0, values = angular.isString(str) ? str.split(/\s*,\s*/) : [];
forEach(values, function(value) {
total = Math.max(parseFloat(value) || 0, total);
});
return total;
}
}
return {

53
test/ngAnimate/animateSpec.js
View file

@ -726,10 +726,10 @@ describe("ngAnimate", function() {
it('should re-evaluate the CSS classes for an animation each time',
inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout, $compile) {
ss.addRule('.abc', '-webkit-transition:22s linear all;' +
'transition:22s linear all;');
ss.addRule('.xyz', '-webkit-transition:11s linear all;' +
'transition:11s linear all;');
ss.addRule('.abc.ng-enter', '-webkit-transition:22s linear all;' +
'transition:22s linear all;');
ss.addRule('.xyz.ng-enter', '-webkit-transition:11s linear all;' +
'transition:11s linear all;');
var parent = $compile('<div><span ng-class="klass"></span></div>')($rootScope);
var element = parent.find('span');
@ -1875,4 +1875,49 @@ describe("ngAnimate", function() {
expect(intercepted).toBe(true);
});
});
it("should cache the response from getComputedStyle if each successive element has the same className value and parent until the first reflow hits", function() {
var count = 0;
module(function($provide) {
$provide.value('$window', {
document : jqLite(window.document),
getComputedStyle: function(element) {
count++;
return window.getComputedStyle(element);
}
});
});
inject(function($animate, $rootScope, $compile, $rootElement, $timeout, $document, $sniffer) {
if(!$sniffer.transitions) return;
$animate.enabled(true);
var element = $compile('<div></div>')($rootScope);
$rootElement.append(element);
jqLite($document[0].body).append($rootElement);
for(var i=0;i<20;i++) {
var kid = $compile('<div class="kid"></div>')($rootScope);
$animate.enter(kid, element);
}
$rootScope.$digest();
$timeout.flush();
expect(count).toBe(2);
dealoc(element);
count = 0;
for(var i=0;i<20;i++) {
var kid = $compile('<div class="kid c-'+i+'"></div>')($rootScope);
$animate.enter(kid, element);
}
$rootScope.$digest();
$timeout.flush();
expect(count).toBe(40);
});
});
});