diff --git a/src/ng/animator.js b/src/ng/animator.js index b588de24..a9ec1616 100644 --- a/src/ng/animator.js +++ b/src/ng/animator.js @@ -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); diff --git a/test/ng/animatorSpec.js b/test/ng/animatorSpec.js index cf5667d2..43983609 100644 --- a/test/ng/animatorSpec.js +++ b/test/ng/animatorSpec.js @@ -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('