fix(ngAnimate): don't close animations when child transitions close

Narretz · Sep 6, 2017 · 20590c0 · 20590c0
1 parent 2f7fad5
commit 20590c0
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/src/ngAnimate/animateCss.js b/src/ngAnimate/animateCss.js
@@ -805,6 +805,12 @@ var $AnimateCssProvider = ['$animateProvider', /** @this */ function($animatePro
         event.stopPropagation();
         var ev = event.originalEvent || event;
 
+        if (ev.target !== node) {
+          // Since TransitionEvent / AnimationEvent bubble up,
+          // we have to ignore events by finished child animations
+          return;
+        }
+
         // we now always use `Date.now()` due to the recent changes with
         // event.timeStamp in Firefox, Webkit and Chrome (see #13494 for more info)
         var timeStamp = ev.$manualTimeStamp || Date.now();

diff --git a/test/ngAnimate/animateCssSpec.js b/test/ngAnimate/animateCssSpec.js
@@ -532,6 +532,60 @@ describe('ngAnimate $animateCss', function() {
           assertAnimationComplete(true);
         }));
 
+        it('should not close a transition when a child element fires the transitionend event',
+          inject(function($animateCss) {
+
+          ss.addPossiblyPrefixedRule('.ng-enter', 'transition:4s linear all;');
+          ss.addPossiblyPrefixedRule('.non-angular-animation', 'transition:5s linear all;');
+
+          var child = angular.element('<div class="non-angular-animation"></div>');
+          element.append(child);
+
+          var animator = $animateCss(element, options);
+          animator.start();
+          triggerAnimationStartFrame();
+
+          browserTrigger(child, 'transitionend', {
+            timeStamp: Date.now(),
+            elapsedTime: 5,
+            bubbles: true
+          });
+
+          transitionProgress(element, 1);
+
+          assertAnimationComplete(false);
+
+          transitionProgress(element, 4);
+          assertAnimationComplete(true);
+        }));
+
+        it('should not close a keyframe animation when a child element fires the animationend event',
+          inject(function($animateCss) {
+
+          ss.addPossiblyPrefixedRule('.ng-enter', 'animation:animation 4s;');
+          ss.addPossiblyPrefixedRule('.non-angular-animation', 'animation:animation 5s;');
+
+          var child = angular.element('<div class="non-angular-animation"></div>');
+          element.append(child);
+
+          var animator = $animateCss(element, options);
+          animator.start();
+          triggerAnimationStartFrame();
+
+          browserTrigger(child, 'animationend', {
+            timeStamp: Date.now(),
+            elapsedTime: 5,
+            bubbles: true
+          });
+
+          keyframeProgress(element, 1);
+
+          assertAnimationComplete(false);
+
+          keyframeProgress(element, 4);
+          assertAnimationComplete(true);
+        }));
+
         it('should use the highest keyframe duration value detected in the CSS class', inject(function($animateCss) {
           ss.addPossiblyPrefixedRule('.ng-enter', 'animation:animation 1s, animation 2s, animation 3s;');