diff options
| -rw-r--r-- | src/ng/animator.js | 37 | ||||
| -rw-r--r-- | test/ng/animatorSpec.js | 27 |
2 files changed, 46 insertions, 18 deletions
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 parsedDelay = Math.max(parseMaxTime(elementStyles[w3cProp + delayKey]), - parseMaxTime(elementStyles[vendorProp + delayKey])); + var transitionDuration = Math.max(parseMaxTime(elementStyles[w3cTransitionProp + durationKey]), + parseMaxTime(elementStyles[vendorTransitionProp + durationKey])); - var parsedDuration = Math.max(parseMaxTime(elementStyles[w3cProp + durationKey]), - parseMaxTime(elementStyles[vendorProp + 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); + } - 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('<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;' + |