diff --git a/css/angular.css b/css/angular.css index 3e20a999cca0..b88e61e483e2 100644 --- a/css/angular.css +++ b/css/angular.css @@ -9,14 +9,3 @@ ng\:form { display: block; } - -/* The styles below ensure that the CSS transition will ALWAYS - * animate and close. A nasty bug occurs with CSS transitions where - * when the active class isn't set, or if the active class doesn't - * contain any styles to transition to, then, if ngAnimate is used, - * it will appear as if the webpage is broken due to the forever hanging - * animations. The border-spacing (!ie) and zoom (ie) CSS properties are - * used below since they trigger a transition without making the browser - * animate anything and they're both highly underused CSS properties */ -.ng-animate-start { border-spacing:1px 1px; -ms-zoom:1.0001; } -.ng-animate-active { border-spacing:0px 0px; -ms-zoom:1; } diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js index aeb6e32e9361..16d0aa0d00e2 100644 --- a/src/ngAnimate/animate.js +++ b/src/ngAnimate/animate.js @@ -881,27 +881,73 @@ angular.module('ngAnimate', ['ng']) var ANIMATION_ITERATION_COUNT_KEY = 'IterationCount'; var NG_ANIMATE_PARENT_KEY = '$$ngAnimateKey'; var NG_ANIMATE_CSS_DATA_KEY = '$$ngAnimateCSS3Data'; - var NG_ANIMATE_FALLBACK_CLASS_NAME = 'ng-animate-start'; - var NG_ANIMATE_FALLBACK_ACTIVE_CLASS_NAME = 'ng-animate-active'; var ELAPSED_TIME_MAX_DECIMAL_PLACES = 3; + var CLOSING_TIME_BUFFER = 1.5; + var ONE_SECOND = 1000; + var animationCounter = 0; var lookupCache = {}; var parentCounter = 0; + var animationReflowQueue = []; + var animationElementQueue = []; + var animationTimer; + var closingAnimationTime = 0; + var timeOut = false; + function afterReflow(element, callback) { + $timeout.cancel(animationTimer); - var animationReflowQueue = [], animationTimer, timeOut = false; - function afterReflow(callback) { animationReflowQueue.push(callback); - $timeout.cancel(animationTimer); + + var node = extractElementNode(element); + element = angular.element(node); + animationElementQueue.push(element); + + var elementData = element.data(NG_ANIMATE_CSS_DATA_KEY); + closingAnimationTime = Math.max(closingAnimationTime, + (elementData.maxDelay + elementData.maxDuration) * CLOSING_TIME_BUFFER * ONE_SECOND); + + //by placing a counter we can avoid an accidental + //race condition which may close an animation when + //a follow-up animation is midway in its animation + elementData.animationCount = animationCounter; + animationTimer = $timeout(function() { forEach(animationReflowQueue, function(fn) { fn(); }); + + //copy the list of elements so that successive + //animations won't conflict if they're added before + //the closing animation timeout has run + var elementQueueSnapshot = []; + var animationCounterSnapshot = animationCounter; + forEach(animationElementQueue, function(elm) { + elementQueueSnapshot.push(elm); + }); + + $timeout(function() { + closeAllAnimations(elementQueueSnapshot, animationCounterSnapshot); + elementQueueSnapshot = null; + }, closingAnimationTime, false); + animationReflowQueue = []; + animationElementQueue = []; animationTimer = null; lookupCache = {}; + closingAnimationTime = 0; + animationCounter++; }, 10, false); } + function closeAllAnimations(elements, count) { + forEach(elements, function(element) { + var elementData = element.data(NG_ANIMATE_CSS_DATA_KEY); + if(elementData && elementData.animationCount == count) { + (elementData.closeAnimationFn || noop)(); + } + }); + } + function getElementAnimationDetails(element, cacheKey) { var data = cacheKey ? lookupCache[cacheKey] : null; if(!data) { @@ -1007,6 +1053,7 @@ angular.module('ngAnimate', ['ng']) 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 maxDelay = Math.max(timings.transitionDelay, timings.animationDelay); var maxDuration = Math.max(timings.transitionDuration, timings.animationDuration); if(maxDuration === 0) { element.removeClass(className); @@ -1016,13 +1063,9 @@ angular.module('ngAnimate', ['ng']) //temporarily disable the transition so that the enter styles //don't animate twice (this is here to avoid a bug in Chrome/FF). var activeClassName = ''; - if(timings.transitionDuration > 0) { - element.addClass(NG_ANIMATE_FALLBACK_CLASS_NAME); - activeClassName += NG_ANIMATE_FALLBACK_ACTIVE_CLASS_NAME + ' '; - blockTransitions(element); - } else { + timings.transitionDuration > 0 ? + blockTransitions(element) : blockKeyframeAnimations(element); - } forEach(className.split(' '), function(klass, i) { activeClassName += (i > 0 ? ' ' : '') + klass + '-active'; @@ -1032,6 +1075,7 @@ angular.module('ngAnimate', ['ng']) className : className, activeClassName : activeClassName, maxDuration : maxDuration, + maxDelay : maxDelay, classes : className + ' ' + activeClassName, timings : timings, stagger : stagger, @@ -1066,30 +1110,28 @@ angular.module('ngAnimate', ['ng']) } function animateRun(element, className, activeAnimationComplete) { - var data = element.data(NG_ANIMATE_CSS_DATA_KEY); + var elementData = element.data(NG_ANIMATE_CSS_DATA_KEY); var node = extractElementNode(element); - if(node.className.indexOf(className) == -1 || !data) { + if(node.className.indexOf(className) == -1 || !elementData) { activeAnimationComplete(); return; } - var timings = data.timings; - var stagger = data.stagger; - var maxDuration = data.maxDuration; - var activeClassName = data.activeClassName; - var maxDelayTime = Math.max(timings.transitionDelay, timings.animationDelay) * 1000; + var timings = elementData.timings; + var stagger = elementData.stagger; + var maxDuration = elementData.maxDuration; + var activeClassName = elementData.activeClassName; + var maxDelayTime = Math.max(timings.transitionDelay, timings.animationDelay) * ONE_SECOND; var startTime = Date.now(); var css3AnimationEvents = ANIMATIONEND_EVENT + ' ' + TRANSITIONEND_EVENT; - var ii = data.ii; + var ii = elementData.ii; - var applyFallbackStyle, style = '', appliedStyles = []; + var style = '', appliedStyles = []; if(timings.transitionDuration > 0) { var propertyStyle = timings.transitionPropertyStyle; if(propertyStyle.indexOf('all') == -1) { - applyFallbackStyle = true; - var fallbackProperty = $sniffer.msie ? '-ms-zoom' : 'border-spacing'; - style += CSS_PREFIX + 'transition-property: ' + propertyStyle + ', ' + fallbackProperty + '; '; - style += CSS_PREFIX + 'transition-duration: ' + timings.transitionDurationStyle + ', ' + timings.transitionDuration + 's; '; + style += CSS_PREFIX + 'transition-property: ' + propertyStyle + ';'; + style += CSS_PREFIX + 'transition-duration: ' + timings.transitionDurationStyle + 's;'; appliedStyles.push(CSS_PREFIX + 'transition-property'); appliedStyles.push(CSS_PREFIX + 'transition-duration'); } @@ -1098,10 +1140,6 @@ angular.module('ngAnimate', ['ng']) if(ii > 0) { if(stagger.transitionDelay > 0 && stagger.transitionDuration === 0) { var delayStyle = timings.transitionDelayStyle; - if(applyFallbackStyle) { - delayStyle += ', ' + timings.transitionDelay + 's'; - } - style += CSS_PREFIX + 'transition-delay: ' + prepareStaggerDelay(delayStyle, stagger.transitionDelay, ii) + '; '; appliedStyles.push(CSS_PREFIX + 'transition-delay'); @@ -1124,11 +1162,16 @@ angular.module('ngAnimate', ['ng']) element.on(css3AnimationEvents, onAnimationProgress); element.addClass(activeClassName); + elementData.closeAnimationFn = function() { + onEnd(); + activeAnimationComplete(); + }; + return onEnd; // 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) { + function onEnd(cancelled) { element.off(css3AnimationEvents, onAnimationProgress); element.removeClass(activeClassName); animateClose(element, className); @@ -1136,7 +1179,7 @@ angular.module('ngAnimate', ['ng']) for (var i in appliedStyles) { node.style.removeProperty(appliedStyles[i]); } - }; + } function onAnimationProgress(event) { event.stopPropagation(); @@ -1202,7 +1245,7 @@ angular.module('ngAnimate', ['ng']) //data from the element which will not make the 2nd animation //happen in the first place var cancel = preReflowCancellation; - afterReflow(function() { + afterReflow(element, function() { unblockTransitions(element); unblockKeyframeAnimations(element); //once the reflow is complete then we point cancel to @@ -1218,7 +1261,6 @@ angular.module('ngAnimate', ['ng']) function animateClose(element, className) { element.removeClass(className); - element.removeClass(NG_ANIMATE_FALLBACK_CLASS_NAME); element.removeData(NG_ANIMATE_CSS_DATA_KEY); } @@ -1268,7 +1310,7 @@ angular.module('ngAnimate', ['ng']) beforeAddClass : function(element, className, animationCompleted) { var cancellationMethod = animateBefore(element, suffixClasses(className, '-add')); if(cancellationMethod) { - afterReflow(function() { + afterReflow(element, function() { unblockTransitions(element); unblockKeyframeAnimations(element); animationCompleted(); @@ -1285,7 +1327,7 @@ angular.module('ngAnimate', ['ng']) beforeRemoveClass : function(element, className, animationCompleted) { var cancellationMethod = animateBefore(element, suffixClasses(className, '-remove')); if(cancellationMethod) { - afterReflow(function() { + afterReflow(element, function() { unblockTransitions(element); unblockKeyframeAnimations(element); animationCompleted(); diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js index 01589da19dde..c9a08fe8ebb6 100644 --- a/test/ngAnimate/animateSpec.js +++ b/test/ngAnimate/animateSpec.js @@ -4,6 +4,7 @@ describe("ngAnimate", function() { beforeEach(module('ngAnimate')); + it("should disable animations on bootstrap for structural animations even after the first digest has passed", function() { var hasBeenAnimated = false; module(function($animateProvider) { @@ -37,10 +38,12 @@ describe("ngAnimate", function() { }); }); + //we use another describe block because the before/after operations below //are used across all animations tests and we don't want that same behavior //to be used on the root describe block at the start of the animateSpec.js file describe('', function() { + var ss, body; beforeEach(module(function() { body = jqLite(document.body); @@ -61,6 +64,7 @@ describe("ngAnimate", function() { dealoc(body); }); + describe("$animate", function() { var element, $rootElement; @@ -85,6 +89,7 @@ describe("ngAnimate", function() { expect($animate.enabled()).toBe(true); })); + it('should place a hard disable on all child animations', function() { var count = 0; module(function($animateProvider) { @@ -132,6 +137,7 @@ describe("ngAnimate", function() { }); }); + it('should skip animations if the element is attached to the $rootElement', function() { var count = 0; module(function($animateProvider) { @@ -154,6 +160,7 @@ describe("ngAnimate", function() { }); }); + it('should check enable/disable animations up until the $rootElement element', function() { var rootElm = jqLite('
'); @@ -195,6 +202,7 @@ describe("ngAnimate", function() { }); }); + describe("with polyfill", function() { var child, after; @@ -262,6 +270,7 @@ describe("ngAnimate", function() { }); }) + it("should animate the enter animation event", inject(function($animate, $rootScope, $sniffer, $timeout) { element[0].removeChild(child[0]); @@ -280,6 +289,7 @@ describe("ngAnimate", function() { expect(element.contents().length).toBe(1); })); + it("should animate the leave animation event", inject(function($animate, $rootScope, $sniffer, $timeout) { @@ -297,6 +307,7 @@ describe("ngAnimate", function() { expect(element.contents().length).toBe(0); })); + it("should animate the move animation event", inject(function($animate, $compile, $rootScope, $timeout, $sniffer) { @@ -316,6 +327,7 @@ describe("ngAnimate", function() { expect(element.text()).toBe('21'); })); + it("should animate the show animation event", inject(function($animate, $rootScope, $sniffer, $timeout) { @@ -334,6 +346,7 @@ describe("ngAnimate", function() { expect(child).toBeShown(); })); + it("should animate the hide animation event", inject(function($animate, $rootScope, $sniffer, $timeout) { @@ -349,6 +362,7 @@ describe("ngAnimate", function() { expect(child).toBeHidden(); })); + it("should assign the ng-event className to all animation events when transitions/keyframes are used", inject(function($animate, $sniffer, $rootScope, $timeout) { @@ -401,6 +415,7 @@ describe("ngAnimate", function() { browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 }); })); + it("should not run if animations are disabled", inject(function($animate, $rootScope, $timeout, $sniffer) { @@ -425,6 +440,7 @@ describe("ngAnimate", function() { expect(element.text()).toBe('memento'); })); + it("should only call done() once and right away if another animation takes place in between", inject(function($animate, $rootScope, $sniffer, $timeout) { @@ -457,6 +473,7 @@ describe("ngAnimate", function() { expect(element.children().length).toBe(0); })); + it("should retain existing styles of the animated element", inject(function($animate, $rootScope, $sniffer, $timeout) { @@ -478,6 +495,7 @@ describe("ngAnimate", function() { expect(child.attr('style')).toMatch(/width: 20px/i); })); + it("should call the cancel callback when another animation is called on the same element", inject(function($animate, $rootScope, $sniffer, $timeout) { @@ -495,6 +513,7 @@ describe("ngAnimate", function() { expect(child.hasClass('animation-cancelled')).toBe(true); })); + it("should skip a class-based animation if the same element already has an ongoing structural animation", inject(function($animate, $rootScope, $sniffer, $timeout) { @@ -519,6 +538,7 @@ describe("ngAnimate", function() { expect(completed).toBe(true); })); + it("should fire the cancel/end function with the correct flag in the parameters", inject(function($animate, $rootScope, $sniffer, $timeout) { @@ -557,6 +577,7 @@ describe("ngAnimate", function() { expect(element.hasClass('custom-long-delay')).toBe(true); })); + it("should allow both multiple JS and CSS animations which run in parallel", inject(function($animate, $rootScope, $compile, $sniffer, $timeout, _$rootElement_) { $rootElement = _$rootElement_; @@ -588,7 +609,9 @@ describe("ngAnimate", function() { })); }); + describe("with CSS3", function() { + beforeEach(function() { module(function() { return function(_$rootElement_) { @@ -597,7 +620,9 @@ describe("ngAnimate", function() { }) }); + describe("Animations", function() { + it("should properly detect and make use of CSS Animations", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { @@ -621,6 +646,7 @@ describe("ngAnimate", function() { expect(element).toBeShown(); })); + it("should properly detect and make use of CSS Animations with multiple iterations", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { @@ -645,29 +671,6 @@ describe("ngAnimate", function() { expect(element).toBeShown(); })); - it("should fallback to the animation duration if an infinite iteration is provided", - inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { - - var style = '-webkit-animation-duration: 2s;' + - '-webkit-animation-iteration-count: infinite;' + - 'animation-duration: 2s;' + - 'animation-iteration-count: infinite;'; - - ss.addRule('.ng-hide-add', style); - ss.addRule('.ng-hide-remove', style); - - element = $compile(html('
1
'))($rootScope); - - element.addClass('ng-hide'); - expect(element).toBeHidden(); - - $animate.removeClass(element, 'ng-hide'); - if ($sniffer.animations) { - $timeout.flush(); - browserTrigger(element,'animationend', { timeStamp: Date.now() + 2000, elapsedTime: 2 }); - } - expect(element).toBeShown(); - })); it("should not consider the animation delay is provided", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { @@ -695,6 +698,7 @@ describe("ngAnimate", function() { expect(element).toBeShown(); })); + it("should skip animations if disabled and run when enabled", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { $animate.enabled(false); @@ -711,6 +715,7 @@ describe("ngAnimate", function() { expect(element).toBeShown(); })); + it("should finish the previous animation when a new animation is started", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { var style = '-webkit-animation: some_animation 2s linear 0s 1 alternate;' + @@ -745,6 +750,7 @@ describe("ngAnimate", function() { expect(element.hasClass('ng-hide-remove-active')).toBe(false); })); + it("should stagger the items when the correct CSS class is provided", inject(function($animate, $rootScope, $compile, $sniffer, $timeout, $document, $rootElement) { @@ -805,6 +811,7 @@ describe("ngAnimate", function() { expect(elements[4].attr('style')).not.toMatch(/animation-delay: 0\.4\d*s/); })); + it("should stagger items when multiple animation durations/delays are defined", inject(function($animate, $rootScope, $compile, $sniffer, $timeout, $document, $rootElement) { @@ -838,108 +845,11 @@ describe("ngAnimate", function() { expect(elements[2].attr('style')).toMatch(/animation-delay: 1\.2\d*s,\s*2\.2\d*s/); expect(elements[3].attr('style')).toMatch(/animation-delay: 1\.3\d*s,\s*2\.3\d*s/); })); - }); - - describe("Transitions", function() { - it("should only apply the fallback transition property unless all properties are being animated", - inject(function($compile, $rootScope, $animate, $sniffer, $timeout) { - - if (!$sniffer.animations) return; - - ss.addRule('.all.ng-enter', '-webkit-transition:1s linear all;' + - 'transition:1s linear all'); - - ss.addRule('.one.ng-enter', '-webkit-transition:1s linear color;' + - 'transition:1s linear color'); - - var element = $compile('
')($rootScope); - var child = $compile('
...
')($rootScope); - $rootElement.append(element); - var body = jqLite($document[0].body); - body.append($rootElement); - - $animate.enter(child, element); - $rootScope.$digest(); - $timeout.flush(); - - expect(child.attr('style') || '').not.toContain('transition-property'); - expect(child.hasClass('ng-animate-start')).toBe(true); - expect(child.hasClass('ng-animate-active')).toBe(true); - - browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1000 }); - $timeout.flush(); - - expect(child.hasClass('ng-animate')).toBe(false); - expect(child.hasClass('ng-animate-active')).toBe(false); - - child.remove(); - - var child2 = $compile('
...
')($rootScope); - - $animate.enter(child2, element); - $rootScope.$digest(); - $timeout.flush(); - - //IE removes the -ms- prefix when placed on the style - var fallbackProperty = $sniffer.msie ? 'zoom' : 'border-spacing'; - var regExp = new RegExp("transition-property:\\s+color\\s*,\\s*" + fallbackProperty + "\\s*;"); - expect(child2.attr('style') || '').toMatch(regExp); - expect(child2.hasClass('ng-animate')).toBe(true); - expect(child2.hasClass('ng-animate-active')).toBe(true); - - browserTrigger(child2,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1000 }); - $timeout.flush(); - - expect(child2.hasClass('ng-animate')).toBe(false); - expect(child2.hasClass('ng-animate-active')).toBe(false); - })); - - it("should not apply the fallback classes if no animations are going on or if CSS animations are going on", - inject(function($compile, $rootScope, $animate, $sniffer, $timeout) { - - if (!$sniffer.animations) return; - - ss.addRule('.transitions', '-webkit-transition:1s linear all;' + - 'transition:1s linear all'); - - ss.addRule('.keyframes', '-webkit-animation:my_animation 1s;' + - 'animation:my_animation 1s'); - - var element = $compile('
...
')($rootScope); - $rootElement.append(element); - jqLite($document[0].body).append($rootElement); - - $animate.enabled(false); - - $animate.addClass(element, 'klass'); - - expect(element.hasClass('ng-animate-start')).toBe(false); - - element.removeClass('klass'); - - $animate.enabled(true); - - $animate.addClass(element, 'klass'); - - $timeout.flush(); - - expect(element.hasClass('ng-animate-start')).toBe(true); - expect(element.hasClass('ng-animate-active')).toBe(true); - - browserTrigger(element,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 }); - expect(element.hasClass('ng-animate-start')).toBe(false); - expect(element.hasClass('ng-animate-active')).toBe(false); - - element.attr('class', 'keyframes'); - - $animate.addClass(element, 'klass2'); + }); - $timeout.flush(); - expect(element.hasClass('ng-animate-start')).toBe(false); - expect(element.hasClass('ng-animate-active')).toBe(false); - })); + describe("Transitions", function() { it("should skip transitions if disabled and run when enabled", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { @@ -971,6 +881,7 @@ describe("ngAnimate", function() { expect(element).toBeShown(); })); + it("should skip animations if disabled and run when enabled picking the longest specified duration", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { @@ -998,6 +909,7 @@ describe("ngAnimate", function() { expect(element).toBeShown(); })); + it("should skip animations if disabled and run when enabled picking the longest specified duration/delay combination", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { $animate.enabled(false); @@ -1033,6 +945,7 @@ describe("ngAnimate", function() { expect(element).toBeShown(); })); + it("should NOT overwrite styles with outdated values when animation completes", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { @@ -1062,6 +975,7 @@ describe("ngAnimate", function() { expect(element.css('width')).toBe("200px"); })); + it("should animate for the highest duration", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { var style = '-webkit-transition:1s linear all 2s;' + @@ -1083,12 +997,13 @@ describe("ngAnimate", function() { } expect(element).toBeShown(); if ($sniffer.transitions) { - expect(element.hasClass('ng-animate-active')).toBe(true); + expect(element.hasClass('ng-hide-remove-active')).toBe(true); browserTrigger(element,'animationend', { timeStamp: Date.now() + 11000, elapsedTime: 11 }); - expect(element.hasClass('ng-animate-active')).toBe(false); + expect(element.hasClass('ng-hide-remove-active')).toBe(false); } })); + it("should finish the previous transition when a new animation is started", inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { var style = '-webkit-transition: 1s linear all;' + @@ -1121,6 +1036,7 @@ describe("ngAnimate", function() { } })); + it("should stagger the items when the correct CSS class is provided", inject(function($animate, $rootScope, $compile, $sniffer, $timeout, $document, $rootElement) { @@ -1181,6 +1097,7 @@ describe("ngAnimate", function() { expect(elements[4].attr('style')).not.toMatch(/transition-delay: 0\.4\d*s/); })); + it("should stagger items when multiple transition durations/delays are defined", inject(function($animate, $rootScope, $compile, $sniffer, $timeout, $document, $rootElement) { @@ -1214,8 +1131,60 @@ describe("ngAnimate", function() { expect(elements[2].attr('style')).toMatch(/transition-delay: 2\.2\d*s,\s*4\.2\d*s/); expect(elements[3].attr('style')).toMatch(/transition-delay: 2\.3\d*s,\s*4\.3\d*s/); })); + + + it("apply a closing timeout to close all pending transitions", + inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { + + if (!$sniffer.transitions) return; + + ss.addRule('.animated-element', '-webkit-transition:5s linear all;' + + 'transition:5s linear all;'); + + element = $compile(html('
foo
'))($rootScope); + + $animate.addClass(element, 'some-class'); + + $timeout.flush(10); //reflow + expect(element.hasClass('some-class-add-active')).toBe(true); + + $timeout.flush(7500); //closing timeout + expect(element.hasClass('some-class-add-active')).toBe(false); + })); + + + it("should not allow the closing animation to close off a successive animation midway", + inject(function($animate, $rootScope, $compile, $sniffer, $timeout) { + + if (!$sniffer.transitions) return; + + ss.addRule('.some-class-add', '-webkit-transition:5s linear all;' + + 'transition:5s linear all;'); + ss.addRule('.some-class-remove', '-webkit-transition:10s linear all;' + + 'transition:10s linear all;'); + + element = $compile(html('
foo
'))($rootScope); + + $animate.addClass(element, 'some-class'); + + $timeout.flush(10); //reflow + expect(element.hasClass('some-class-add-active')).toBe(true); + + $animate.removeClass(element, 'some-class'); + + $timeout.flush(10); //second reflow + + $timeout.flush(7500); //closing timeout for the first animation + expect(element.hasClass('some-class-remove-active')).toBe(true); + + $timeout.flush(15000); //closing timeout for the second animation + expect(element.hasClass('some-class-remove-active')).toBe(false); + + $timeout.verifyNoPendingTasks(); + })); }); + it("should apply staggering to both transitions and keyframe animations when used within the same animation", inject(function($animate, $rootScope, $compile, $sniffer, $timeout, $document, $rootElement) { @@ -1263,7 +1232,9 @@ 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, $compile) { @@ -1306,6 +1277,7 @@ describe("ngAnimate", function() { expect(element.hasClass('xyz')).toBe(true); })); + it('should only append active to the newly append CSS className values', inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) { @@ -1340,7 +1312,9 @@ describe("ngAnimate", function() { })); }); + describe("Callbacks", function() { + beforeEach(function() { module(function($animateProvider) { $animateProvider.register('.custom', function($timeout) { @@ -1360,6 +1334,7 @@ describe("ngAnimate", function() { }) }); + it("should fire the enter callback", inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) { @@ -1379,6 +1354,7 @@ describe("ngAnimate", function() { expect(flag).toBe(true); })); + it("should fire the leave callback", inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) { @@ -1398,6 +1374,7 @@ describe("ngAnimate", function() { expect(flag).toBe(true); })); + it("should fire the move callback", inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) { @@ -1419,6 +1396,7 @@ describe("ngAnimate", function() { expect(element.parent().id).toBe(parent2.id); })); + it("should fire the addClass/removeClass callbacks", inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) { @@ -1441,6 +1419,7 @@ describe("ngAnimate", function() { expect(signature).toBe('AB'); })); + it("should fire a done callback when provided with no animation", inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) { @@ -1458,6 +1437,7 @@ describe("ngAnimate", function() { expect(flag).toBe(true); })); + it("should fire a done callback when provided with a css animation/transition", inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) { @@ -1483,6 +1463,7 @@ describe("ngAnimate", function() { expect(flag).toBe(true); })); + it("should fire a done callback when provided with a JS animation", inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) { @@ -1501,6 +1482,7 @@ describe("ngAnimate", function() { expect(flag).toBe(true); })); + it("should fire the callback right away if another animation is called right after", inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) { @@ -1528,7 +1510,9 @@ describe("ngAnimate", function() { })); }); + describe("addClass / removeClass", function() { + var captured; beforeEach(function() { module(function($animateProvider, $provide) { @@ -1547,6 +1531,7 @@ describe("ngAnimate", function() { }); }); + it("should not perform an animation, and the followup DOM operation, if the class is " + "already present during addClass or not present during removeClass on the element", inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) { @@ -1582,6 +1567,7 @@ describe("ngAnimate", function() { expect(captured).toBe('addClass-some-class'); })); + it("should add and remove CSS classes after an animation even if no animation is present", inject(function($animate, $rootScope, $sniffer, $rootElement) { @@ -1601,6 +1587,7 @@ describe("ngAnimate", function() { expect(element.hasClass('klass-remove-active')).toBe(false); })); + it("should add and remove CSS classes with a callback", inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) { @@ -1626,6 +1613,7 @@ describe("ngAnimate", function() { expect(signature).toBe('AB'); })); + it("should end the current addClass animation, add the CSS class and then run the removeClass animation", inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) { @@ -1675,6 +1663,7 @@ describe("ngAnimate", function() { expect(signature).toBe('12'); })); + it("should properly execute JS animations and use callbacks when using addClass / removeClass", inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) { @@ -1704,6 +1693,7 @@ describe("ngAnimate", function() { expect(signature).toBe('XY'); })); + it("should properly execute CSS animations/transitions and use callbacks when using addClass / removeClass", inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) { @@ -1754,6 +1744,7 @@ describe("ngAnimate", function() { expect(signature).toBe('db'); })); + it("should allow for multiple css classes to be animated plus a callback when added", inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) { @@ -1795,6 +1786,7 @@ describe("ngAnimate", function() { expect(flag).toBe(true); })); + it("should allow for multiple css classes to be animated plus a callback when removed", inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) { @@ -1858,6 +1850,7 @@ describe("ngAnimate", function() { return element; } + it("should properly animate and parse CSS3 transitions", inject(function($compile, $rootScope, $animate, $sniffer, $timeout) { @@ -1881,6 +1874,7 @@ describe("ngAnimate", function() { expect(child.hasClass('ng-enter-active')).toBe(false); })); + it("should properly animate and parse CSS3 animations", inject(function($compile, $rootScope, $animate, $sniffer, $timeout) { @@ -1903,6 +1897,7 @@ describe("ngAnimate", function() { expect(child.hasClass('ng-enter-active')).toBe(false); })); + it("should not set the transition property flag if only CSS animations are used", inject(function($compile, $rootScope, $animate, $sniffer, $timeout) { @@ -1937,6 +1932,7 @@ describe("ngAnimate", function() { expect(child.css(propertyKey)).not.toBe('background-color'); })); + it("should skip animations if the browser does not support CSS3 transitions and CSS3 animations", inject(function($compile, $rootScope, $animate, $sniffer) { @@ -1955,6 +1951,7 @@ describe("ngAnimate", function() { expect(child.hasClass('ng-enter')).toBe(false); })); + it("should run other defined animations inline with CSS3 animations", function() { module(function($animateProvider) { $animateProvider.register('.custom', function($timeout) { @@ -1990,6 +1987,7 @@ describe("ngAnimate", function() { }); }); + it("should properly cancel CSS transitions or animations if another animation is fired", function() { module(function($animateProvider) { $animateProvider.register('.usurper', function($timeout) { @@ -2036,6 +2034,7 @@ describe("ngAnimate", function() { }); }); + it("should not perform the active class animation if the animation has been cancelled before the reflow occurs", function() { inject(function($compile, $rootScope, $animate, $sniffer, $timeout) { if(!$sniffer.transitions) return; @@ -2059,6 +2058,7 @@ describe("ngAnimate", function() { }); }); + // // it("should add and remove CSS classes and perform CSS animations during the process", // inject(function($compile, $rootScope, $animate, $sniffer, $timeout) { // @@ -2098,6 +2098,7 @@ describe("ngAnimate", function() { // expect(element.hasClass('on-remove-active')).toBe(false); // })); // + // // it("should show and hide elements with CSS & JS animations being performed in the process", function() { // module(function($animateProvider) { // $animateProvider.register('.displayer', function($timeout) { @@ -2158,6 +2159,8 @@ describe("ngAnimate", function() { // expect(element.hasClass('hiding')).toBe(false); // }); // }); + + it("should remove all the previous classes when the next animation is applied before a reflow", function() { var fn, interceptedClass; module(function($animateProvider) { @@ -2195,6 +2198,7 @@ describe("ngAnimate", function() { }); }); + it("should provide the correct CSS class to the addClass and removeClass callbacks within a JS animation", function() { module(function($animateProvider) { $animateProvider.register('.classify', function() { @@ -2224,6 +2228,7 @@ describe("ngAnimate", function() { }); }); + it("should not skip ngAnimate animations when any pre-existing CSS transitions are present on the element", function() { inject(function($compile, $rootScope, $animate, $timeout, $sniffer) { if(!$sniffer.transitions) return; @@ -2252,6 +2257,7 @@ describe("ngAnimate", function() { }); }); + it("should wait until both the duration and delay are complete to close off the animation", inject(function($compile, $rootScope, $animate, $timeout, $sniffer) { @@ -2286,6 +2292,7 @@ describe("ngAnimate", function() { expect(element.contents().length).toBe(1); })); + it("should cancel all child animations when a leave or move animation is triggered on a parent element", function() { var step, animationState; @@ -2361,6 +2368,7 @@ describe("ngAnimate", function() { }); }); + it("should wait until a queue of animations are complete before performing a reflow", inject(function($rootScope, $compile, $timeout,$sniffer) { @@ -2495,6 +2503,7 @@ describe("ngAnimate", function() { }); }); + it("should not disable any child animations when any parent class-based animations are run", function() { var intercepted; module(function($animateProvider) { @@ -2521,6 +2530,7 @@ describe("ngAnimate", function() { }); }); + 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) { @@ -2567,6 +2577,7 @@ describe("ngAnimate", function() { }); }); + it("should cancel an ongoing class-based animation only if the new class contains transition/animation CSS code", inject(function($compile, $rootScope, $animate, $sniffer, $timeout) { @@ -2603,6 +2614,7 @@ describe("ngAnimate", function() { expect(element.hasClass('yellow-add')).toBe(true); })); + it("should cancel and perform the dom operation only after the reflow has run", inject(function($compile, $rootScope, $animate, $sniffer, $timeout) { @@ -2633,6 +2645,7 @@ describe("ngAnimate", function() { expect(element.hasClass('red')).toBe(true); })); + it('should enable and disable animations properly on the root element', function() { var count = 0; module(function($animateProvider) { @@ -2656,6 +2669,7 @@ describe("ngAnimate", function() { }); }); + it('should perform pre and post animations', function() { var steps = []; module(function($animateProvider) { @@ -2684,6 +2698,7 @@ describe("ngAnimate", function() { }); }); + it('should treat the leave event always as a before event and discard the beforeLeave function', function() { var parentID, steps = []; module(function($animateProvider) { @@ -2717,6 +2732,7 @@ describe("ngAnimate", function() { }); }); + it('should only perform the DOM operation once', inject(function($sniffer, $compile, $rootScope, $rootElement, $animate, $timeout) { @@ -2751,6 +2767,7 @@ describe("ngAnimate", function() { expect(element.hasClass('base-class')).toBe(true); })); + it('should block and unblock transitions before the dom operation occurs', inject(function($rootScope, $compile, $rootElement, $document, $animate, $sniffer, $timeout) { @@ -2784,6 +2801,7 @@ describe("ngAnimate", function() { expect(capturedProperty).not.toBe('none'); })); + it('should block and unblock keyframe animations around the reflow operation', inject(function($rootScope, $compile, $rootElement, $document, $animate, $sniffer, $timeout) { @@ -2810,6 +2828,7 @@ describe("ngAnimate", function() { expect(node.style[animationKey]).not.toContain('none'); })); + it('should block and unblock keyframe animations before the followup JS animation occurs', function() { module(function($animateProvider) { $animateProvider.register('.special', function($sniffer, $window) { @@ -2853,6 +2872,7 @@ describe("ngAnimate", function() { }); }); + it('should round up long elapsedTime values to close off a CSS3 animation', inject(function($rootScope, $compile, $rootElement, $document, $animate, $sniffer, $timeout, $window) { if (!$sniffer.animations) return; @@ -2874,6 +2894,7 @@ describe("ngAnimate", function() { expect($rootElement.children().length).toBe(0); })); + it('should properly animate elements with compound directives', function() { var capturedAnimation; module(function($animateProvider) {