diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js index ca136a504942..d03ff64302fd 100644 --- a/src/ngAnimate/animate.js +++ b/src/ngAnimate/animate.js @@ -549,13 +549,16 @@ angular.module('ngAnimate', ['ng']) //one day all browsers will have these properties var w3cAnimationProp = 'animation'; var w3cTransitionProp = 'transition'; + var w3cAnimationEvent = 'animationend'; + var w3cTransitionEvent = 'transitionend'; //but some still use vendor-prefixed styles var vendorAnimationProp = $sniffer.vendorPrefix + 'Animation'; var vendorTransitionProp = $sniffer.vendorPrefix + 'Transition'; + var vendorAnimationEvent = $sniffer.vendorPrefix.toLowerCase() + 'AnimationEnd'; + var vendorTransitionEvent = $sniffer.vendorPrefix.toLowerCase() + 'TransitionEnd'; var durationKey = 'Duration', - delayKey = 'Delay', propertyKey = 'Property', animationIterationCountKey = 'IterationCount', ELEMENT_NODE = 1; @@ -584,17 +587,12 @@ angular.module('ngAnimate', ['ng']) element.addClass(className); //we want all the styles defined before and after - var duration = 0; + var transitionTime = 0, + animationTime = 0; forEach(element, function(element) { if (element.nodeType == ELEMENT_NODE) { var elementStyles = $window.getComputedStyle(element) || {}; - 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])); @@ -607,16 +605,16 @@ angular.module('ngAnimate', ['ng']) 1); } - duration = Math.max(animationDelay + animationDuration, - transitionDelay + transitionDuration, - duration); + transitionTime = Math.max(transitionDuration, transitionTime); + animationTime = Math.max(animationDuration, animationTime); } }); /* there is no point in performing a reflow if the animation timeout is empty (this would cause a flicker bug normally in the page */ - if(duration > 0) { + var totalTime = Math.max(transitionTime,animationTime); + if(totalTime > 0) { var node = element[0]; //temporarily disable the transition so that the enter styles @@ -635,12 +633,15 @@ angular.module('ngAnimate', ['ng']) node.style[vendorTransitionProp + propertyKey] = ''; element.addClass(activeClassName); - $timeout(done, duration * 1000, false); + var css3AnimationEvents = [w3cAnimationEvent, vendorAnimationEvent, + w3cTransitionEvent, vendorTransitionEvent].join(' '); + element.on(css3AnimationEvents, onAnimationProgress); //this will automatically be called by $animate so //there is no need to attach this internally to the //timeout done method return function onEnd(cancelled) { + element.off(css3AnimationEvents, onAnimationProgress); element.removeClass(className); element.removeClass(activeClassName); @@ -657,6 +658,10 @@ angular.module('ngAnimate', ['ng']) done(); } + function onAnimationProgress(event) { + event.originalEvent.elapsedTime >= totalTime && done(); + } + function parseMaxTime(str) { var total = 0, values = angular.isString(str) ? str.split(/\s*,\s*/) : []; forEach(values, function(value) { diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js index 661cc91e87a6..8b88776fc657 100644 --- a/test/ngAnimate/animateSpec.js +++ b/test/ngAnimate/animateSpec.js @@ -138,7 +138,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(child.hasClass('ng-enter')).toBe(true); expect(child.hasClass('ng-enter-active')).toBe(true); - $timeout.flush(); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); } expect(element.contents().length).toBe(1); @@ -154,7 +154,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(child.hasClass('ng-leave')).toBe(true); expect(child.hasClass('ng-leave-active')).toBe(true); - $timeout.flush(); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); } expect(element.contents().length).toBe(0); @@ -186,7 +186,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(child.hasClass('ng-hide-remove')).toBe(true); expect(child.hasClass('ng-hide-remove-active')).toBe(true); - $timeout.flush(); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); } expect(child.hasClass('ng-hide-remove')).toBe(false); expect(child.hasClass('ng-hide-remove-active')).toBe(false); @@ -202,7 +202,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(child.hasClass('ng-hide-add')).toBe(true); expect(child.hasClass('ng-hide-add-active')).toBe(true); - $timeout.flush(); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); } expect(child).toBeHidden(); })); @@ -221,7 +221,7 @@ describe("ngAnimate", function() { expect(child.attr('class')).toContain('ng-enter'); expect(child.attr('class')).toContain('ng-enter-active'); - $timeout.flushNext(1000); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); //move element.append(after); @@ -230,26 +230,26 @@ describe("ngAnimate", function() { expect(child.attr('class')).toContain('ng-move'); expect(child.attr('class')).toContain('ng-move-active'); - $timeout.flushNext(1000); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); //hide $animate.addClass(child, 'ng-hide'); expect(child.attr('class')).toContain('ng-hide-add'); expect(child.attr('class')).toContain('ng-hide-add-active'); - $timeout.flushNext(1000); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); //show $animate.removeClass(child, 'ng-hide'); expect(child.attr('class')).toContain('ng-hide-remove'); expect(child.attr('class')).toContain('ng-hide-remove-active'); - $timeout.flushNext(1000); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); //leave $animate.leave(child); $rootScope.$digest(); expect(child.attr('class')).toContain('ng-leave'); expect(child.attr('class')).toContain('ng-leave-active'); - $timeout.flushNext(1000); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); })); it("should not run if animations are disabled", @@ -292,11 +292,10 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(element.children().length).toBe(1); //still animating - $timeout.flushNext(1000); - $timeout.flushNext(1000); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); } - $timeout.flushNext(2000); - $timeout.flushNext(2000); + $timeout.flush(2000); + $timeout.flush(2000); expect(child).toBeShown(); expect(element.children().length).toBe(0); @@ -310,9 +309,9 @@ describe("ngAnimate", function() { child.addClass('custom-delay ng-hide'); $animate.removeClass(child, 'ng-hide'); if($sniffer.transitions) { - $timeout.flushNext(1000); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); } - $timeout.flushNext(2000); + $timeout.flush(2000); $animate.addClass(child, 'ng-hide'); @@ -352,8 +351,8 @@ describe("ngAnimate", function() { inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { $animate.addClass(element, 'custom-delay custom-long-delay'); - $timeout.flushNext(2000); - $timeout.flushNext(20000); + $timeout.flush(2000); + $timeout.flush(20000); expect(element.hasClass('custom-delay')).toBe(true); expect(element.hasClass('custom-long-delay')).toBe(true); })); @@ -374,10 +373,10 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if($sniffer.transitions) { - $timeout.flushNext(1000); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); } - $timeout.flushNext(2000); - $timeout.flushNext(20000); + $timeout.flush(2000); + $timeout.flush(20000); expect(element.hasClass('custom-delay')).toBe(true); expect(element.hasClass('custom-delay-add')).toBe(false); @@ -417,7 +416,7 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.animations) { - $timeout.flushNext(4000); + element.triggerHandler('animationend', { originalEvent: { elapsedTime: 4 } }); } expect(element).toBeShown(); })); @@ -440,7 +439,7 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.animations) { - $timeout.flushNext(6000); + element.triggerHandler('animationend', { originalEvent: { elapsedTime: 6 } }); } expect(element).toBeShown(); })); @@ -463,12 +462,12 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.animations) { - $timeout.flushNext(2000); + element.triggerHandler('animationend', { originalEvent: { elapsedTime: 2 } }); } expect(element).toBeShown(); })); - it("should consider the animation delay is provided", + it("should not consider the animation delay is provided", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { var style = 'animation-duration: 2s;' + @@ -488,7 +487,7 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { - $timeout.flushNext(20000); + element.triggerHandler('animationend', { originalEvent: { elapsedTime: 10 } }); } expect(element).toBeShown(); })); @@ -534,7 +533,7 @@ describe("ngAnimate", function() { if($sniffer.animations) { //cleanup some pending animations expect(element.hasClass('ng-hide-add')).toBe(true); expect(element.hasClass('ng-hide-add-active')).toBe(true); - $timeout.flushNext(2000); + element.triggerHandler('animationend', { originalEvent: { elapsedTime: 2 } }); } expect(element.hasClass('ng-hide-remove-active')).toBe(false); @@ -567,7 +566,7 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { - $timeout.flushNext(1000); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); } expect(element).toBeShown(); })); @@ -588,7 +587,9 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { expect(element).toBeHidden(); - $timeout.flushNext(2000); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 2 } }); } expect(element).toBeShown(); })); @@ -610,7 +611,7 @@ describe("ngAnimate", function() { element.addClass('ng-hide'); $animate.removeClass(element, 'ng-hide'); - $timeout.flushNext(0); + $timeout.flush(0); expect(element).toBeShown(); $animate.enabled(true); @@ -619,12 +620,14 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { - $timeout.flushNext(3000); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 0 } }); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); } expect(element).toBeShown(); })); - it("should select the highest duration and delay", + it("should animate for the highest duration", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { var style = 'transition:1s linear all 2s;' + vendorPrefix + 'transition:1s linear all 2s;' + @@ -641,7 +644,7 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { - $timeout.flushNext(11000); + element.triggerHandler('animationend', { originalEvent: { elapsedTime: 10 } }); } expect(element).toBeShown(); })); @@ -661,7 +664,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(element.hasClass('ng-hide-remove')).toBe(true); expect(element.hasClass('ng-hide-remove-active')).toBe(true); - $timeout.flushNext(1000); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); } expect(element.hasClass('ng-hide-remove')).toBe(false); expect(element.hasClass('ng-hide-remove-active')).toBe(false); @@ -678,37 +681,37 @@ describe("ngAnimate", function() { describe('animation evaluation', function () { it('should re-evaluate the CSS classes for an animation each time', - inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) { + inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout, $compile) { - ss.addRule('.ng-enter', 'transition:22s linear all;' + - vendorPrefix + 'transition:22s linear all'); - ss.addRule('.ng-enter', 'transition:22s linear all;' + + ss.addRule('.abc', 'transition:22s linear all;' + vendorPrefix + 'transition:22s linear all'); + ss.addRule('.xyz', 'transition:11s linear all;' + + vendorPrefix + 'transition:11s linear all'); - var parent = jqLite('
'); + var parent = $compile('
')($rootScope); var element = parent.find('span'); $rootElement.append(parent); angular.element(document.body).append($rootElement); - element[0].className = 'abc'; + $rootScope.klass = 'abc'; $animate.enter(element, parent); $rootScope.$digest(); if ($sniffer.transitions) { expect(element.hasClass('abc ng-enter')).toBe(true); expect(element.hasClass('abc ng-enter ng-enter-active')).toBe(true); - $timeout.flushNext(22000); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 22 } }); } expect(element.hasClass('abc')).toBe(true); - element[0].className = 'xyz'; + $rootScope.klass = 'xyz'; $animate.enter(element, parent); $rootScope.$digest(); if ($sniffer.transitions) { expect(element.hasClass('xyz')).toBe(true); expect(element.hasClass('xyz ng-enter ng-enter-active')).toBe(true); - $timeout.flushNext(22000); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 11 } }); } expect(element.hasClass('xyz')).toBe(true); })); @@ -735,7 +738,7 @@ describe("ngAnimate", function() { expect(element.hasClass('one two ng-enter ng-enter-active')).toBe(true); expect(element.hasClass('one-active')).toBe(false); expect(element.hasClass('two-active')).toBe(false); - $timeout.flushNext(9000); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 3 } }); } expect(element.hasClass('one two')).toBe(true); @@ -883,6 +886,9 @@ describe("ngAnimate", function() { flag = true; }); + if($sniffer.transitions) { + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + } $timeout.flush(); expect(flag).toBe(true); })); @@ -1019,7 +1025,7 @@ describe("ngAnimate", function() { expect(element.hasClass('klass')).toBe(false); expect(element.hasClass('klass-add')).toBe(true); expect(element.hasClass('klass-add-active')).toBe(true); - $timeout.flushNext(3000); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 3 } }); } //this cancels out the older animation @@ -1033,6 +1039,7 @@ describe("ngAnimate", function() { expect(element.hasClass('klass-add-active')).toBe(false); expect(element.hasClass('klass-remove')).toBe(true); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 3 } }); } $timeout.flush(); @@ -1090,7 +1097,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(element.hasClass('klass-add')).toBe(true); expect(element.hasClass('klass-add-active')).toBe(true); - $timeout.flushNext(11000); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 11 } }); expect(element.hasClass('klass-add')).toBe(false); expect(element.hasClass('klass-add-active')).toBe(false); } @@ -1104,7 +1111,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(element.hasClass('klass-remove')).toBe(true); expect(element.hasClass('klass-remove-active')).toBe(true); - $timeout.flushNext(11000); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 11 } }); expect(element.hasClass('klass-remove')).toBe(false); expect(element.hasClass('klass-remove-active')).toBe(false); } @@ -1139,7 +1146,7 @@ describe("ngAnimate", function() { expect(element.hasClass('one-add-active')).toBe(true); expect(element.hasClass('two-add-active')).toBe(true); - $timeout.flushNext(7000); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 7 } }); expect(element.hasClass('one-add')).toBe(false); expect(element.hasClass('one-add-active')).toBe(false); @@ -1183,7 +1190,7 @@ describe("ngAnimate", function() { expect(element.hasClass('one-remove-active')).toBe(true); expect(element.hasClass('two-remove-active')).toBe(true); - $timeout.flushNext(9000); + element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 9 } }); expect(element.hasClass('one-remove')).toBe(false); expect(element.hasClass('one-remove-active')).toBe(false); @@ -1233,7 +1240,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(child.hasClass('ng-enter')).toBe(true); expect(child.hasClass('ng-enter-active')).toBe(true); - $timeout.flushNext(1000); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); } expect(child.hasClass('ng-enter')).toBe(false); @@ -1255,7 +1262,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(child.hasClass('ng-enter')).toBe(true); expect(child.hasClass('ng-enter-active')).toBe(true); - $timeout.flushNext(9000); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 8 } }); } expect(child.hasClass('ng-enter')).toBe(false); expect(child.hasClass('ng-enter-active')).toBe(false); @@ -1304,10 +1311,10 @@ describe("ngAnimate", function() { $animate.enter(child, element); $rootScope.$digest(); - $timeout.flushNext(10); + $timeout.flush(10); if($sniffer.transitions) { - $timeout.flushNext(1000); + child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); } expect(child.hasClass('i-was-animated')).toBe(true); @@ -1354,7 +1361,7 @@ describe("ngAnimate", function() { expect(child.hasClass('usurper')).toBe(true); expect(child.hasClass('this-is-mine-now')).toBe(true); - $timeout.flushNext(55); + $timeout.flush(55); }); }); @@ -1435,7 +1442,7 @@ describe("ngAnimate", function() { // expect(element).toBeShown(); //still showing // $timeout.flush(); // expect(element).toBeShown(); -// $timeout.flushNext(5555); +// $timeout.flush(5555); // } // $timeout.flush(); // expect(element).toBeHidden(); @@ -1448,7 +1455,7 @@ describe("ngAnimate", function() { // expect(element).toBeHidden(); // $timeout.flush(); // expect(element).toBeHidden(); -// $timeout.flushNext(5580); +// $timeout.flush(5580); // } // $timeout.flush(); // expect(element).toBeShown();