fix($animate): ensure that parallel class-based animations are all ev…

…entually closed When multiple classes are added/removed in parallel then $animate only closes off the last animation when the fallback timer has expired. Now all animations are closed off. Fixes angular#7766
matsko · Jun 10, 2014 · 749610c · 749610c
1 parent e4419da
commit 749610c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js
@@ -1236,7 +1236,9 @@ angular.module('ngAnimate', ['ng'])
         forEach(elements, function(element) {
           var elementData = element.data(NG_ANIMATE_CSS_DATA_KEY);
           if(elementData) {
-            (elementData.closeAnimationFn || noop)();
+            forEach(elementData.closeAnimationFns, function(fn) {
+              fn();
+            });
           }
         });
       }
@@ -1357,14 +1359,15 @@ angular.module('ngAnimate', ['ng'])
                              stagger.animationDelay > 0 &&
                              stagger.animationDuration === 0;
 
+        var closeAnimationFns = formerData.closeAnimationFns || [];
         element.data(NG_ANIMATE_CSS_DATA_KEY, {
           stagger : stagger,
           cacheKey : eventCacheKey,
           running : formerData.running || 0,
           itemIndex : itemIndex,
           blockTransition : blockTransition,
           blockAnimation : blockAnimation,
-          closeAnimationFn : noop
+          closeAnimationFns : closeAnimationFns
         });
 
         var node = extractElementNode(element);
@@ -1456,10 +1459,10 @@ angular.module('ngAnimate', ['ng'])
         var css3AnimationEvents = ANIMATIONEND_EVENT + ' ' + TRANSITIONEND_EVENT;
 
         element.on(css3AnimationEvents, onAnimationProgress);
-        elementData.closeAnimationFn = function() {
+        elementData.closeAnimationFns.push(function() {
           onEnd();
           activeAnimationComplete();
-        };
+        });
 
         var staggerTime       = itemIndex * (Math.max(stagger.animationDelay, stagger.transitionDelay) || 0);
         var animationTime     = (maxDelay + maxDuration) * CLOSING_TIME_BUFFER;

diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
@@ -1569,6 +1569,32 @@ describe("ngAnimate", function() {
             });
           });
 
+          it('should apply a closing timeout to close all parallel class-based animations on the same element',
+            inject(function($sniffer, $compile, $rootScope, $rootElement, $animate, $timeout) {
+
+            if (!$sniffer.transitions) return;
+
+            ss.addRule('.base-class', '-webkit-transition:2s linear all;' +
+                                              'transition:2s linear all;');
+
+            var element = $compile('<div class="base-class"></div>')($rootScope);
+            $rootElement.append(element);
+            jqLite($document[0].body).append($rootElement);
+
+            $animate.addClass(element, 'one');
+            $animate.addClass(element, 'two');
+
+            $animate.triggerReflow();
+
+            $timeout.flush(3000); //2s * 1.5
+
+            expect(element.hasClass('one-add')).toBeFalsy();
+            expect(element.hasClass('one-add-active')).toBeFalsy();
+            expect(element.hasClass('two-add')).toBeFalsy();
+            expect(element.hasClass('two-add-active')).toBeFalsy();
+            expect(element.hasClass('ng-animate')).toBeFalsy();
+          }));
+
           it("apply a closing timeout with respect to a staggering animation",
             inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {