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

fix($animator): ensure $animator calculates the highest duration + delay for and transitions and animations together

Browse source
This commit is contained in:
Matias Niemelä 2013-05-26 20:28:47 -04:00 committed by Misko Hevery
parent a2f9e78a56
commit a4b9a6aca9
2 changed files with 47 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/ng/animator.js
View file

@ -345,28 +345,29 @@ var $AnimatorProvider = function() {
var ELEMENT_NODE = 1;
forEach(element, function(element) {
if (element.nodeType == ELEMENT_NODE) {
var w3cProp = w3cTransitionProp,
vendorProp = vendorTransitionProp,
iterations = 1,
elementStyles = $window.getComputedStyle(element) || {};
var elementStyles = $window.getComputedStyle(element) || {};
//use CSS Animations over CSS Transitions
if(parseFloat(elementStyles[w3cAnimationProp + durationKey]) > 0 ||
parseFloat(elementStyles[vendorAnimationProp + durationKey]) > 0) {
w3cProp = w3cAnimationProp;
vendorProp = vendorAnimationProp;
iterations = Math.max(parseInt(elementStyles[w3cProp + animationIterationCountKey]) || 0,
parseInt(elementStyles[vendorProp + animationIterationCountKey]) || 0,
iterations);
var transitionDelay = Math.max(parseMaxTime(elementStyles[w3cTransitionProp + delayKey]),
parseMaxTime(elementStyles[vendorTransitionProp + delayKey]));
var animationDelay = Math.max(parseMaxTime(elementStyles[w3cAnimationProp + delayKey]),
parseMaxTime(elementStyles[vendorAnimationProp + delayKey]));
var transitionDuration = Math.max(parseMaxTime(elementStyles[w3cTransitionProp + durationKey]),
parseMaxTime(elementStyles[vendorTransitionProp + durationKey]));
var animationDuration = Math.max(parseMaxTime(elementStyles[w3cAnimationProp + durationKey]),
parseMaxTime(elementStyles[vendorAnimationProp + durationKey]));
if(animationDuration > 0) {
animationDuration *= Math.max(parseInt(elementStyles[w3cAnimationProp + animationIterationCountKey]) || 0,
parseInt(elementStyles[vendorAnimationProp + animationIterationCountKey]) || 0,
1);
}
var parsedDelay = Math.max(parseMaxTime(elementStyles[w3cProp + delayKey]),
parseMaxTime(elementStyles[vendorProp + delayKey]));
var parsedDuration = Math.max(parseMaxTime(elementStyles[w3cProp + durationKey]),
parseMaxTime(elementStyles[vendorProp + durationKey]));
duration = Math.max(parsedDelay + (iterations * parsedDuration), duration);
duration = Math.max(animationDelay + animationDuration,
transitionDelay + transitionDuration,
duration);
}
});
$window.setTimeout(done, duration * 1000);

27
test/ng/animatorSpec.js
View file

@ -666,6 +666,33 @@ describe("$animator", function() {
expect(element[0].style.display).toBe('');
}));
it("should select the highest duration and delay",
inject(function($animator, $rootScope, $compile, $sniffer) {
var styles = 'transition:1s linear all 2s;' +
vendorPrefix + 'transition:1s linear all 2s;' +
'animation:my_ani 10s 1s;' +
vendorPrefix + 'animation:my_ani 10s 1s;';
element = $compile(html('<div style="' + styles + '">foo</div>'))($rootScope);
var animator = $animator($rootScope, {
ngAnimate : '{show: \'inline-show\'}'
});
element.css('display','none');
expect(element.css('display')).toBe('none');
animator.show(element);
if ($sniffer.transitions) {
window.setTimeout.expect(1).process();
window.setTimeout.expect(11000).process();
}
else {
expect(window.setTimeout.queue.length).toBe(0);
}
expect(element[0].style.display).toBe('');
}));
it("should finish the previous transition when a new animation is started",
inject(function($animator, $rootScope, $compile, $sniffer) {
var style = 'transition: 1s linear all;' +