fix(events): start and end events capture bubbles

event-listeners should only act on start/end animation events from target element.
aurelia · Aug 16, 2017 · bb85e90 · bb85e90
1 parent 163f430
commit bb85e90
Showing 1 changed file with 19 additions and 1 deletion.
diff --git a/src/animator.js b/src/animator.js
@@ -258,6 +258,9 @@ export class CssAnimator {
       let animStart;
       let animHasStarted = false;
       this._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = (evAnimStart) => {
+        if (evAnimStart.target !== element) {
+          return;
+        }
         animHasStarted = true;
         this.isAnimating = true;
 
@@ -275,6 +278,9 @@ export class CssAnimator {
         if (!animHasStarted) {
           return;
         }
+        if (evAnimEnd.target !== element) {
+          return;
+        }
 
         // Step 3.1.0: Stop event propagation, bubbling will otherwise prevent parent animation
         evAnimEnd.stopPropagation();
@@ -388,6 +394,9 @@ export class CssAnimator {
       let animStart;
       let animHasStarted = false;
       this._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = (evAnimStart) => {
+        if (evAnimStart.target !== element) {
+          return;
+        }
         animHasStarted = true;
         this.isAnimating = true;
 
@@ -407,6 +416,9 @@ export class CssAnimator {
         if (! animHasStarted) {
           return;
         }
+        if (evAnimEnd.target !== element) {
+          return;
+        }
 
         // Step 3.1.0: Stop event propagation, bubbling will otherwise prevent parent animation
         evAnimEnd.stopPropagation();
@@ -467,6 +479,9 @@ export class CssAnimator {
       let animStart;
       let animHasStarted = false;
       this._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = (evAnimStart) => {
+        if (evAnimStart.target !== element) {
+          return;
+        }
         animHasStarted = true;
         this.isAnimating = true;
 
@@ -486,7 +501,10 @@ export class CssAnimator {
         if (! animHasStarted) {
           return;
         }
-
+        if (evAnimEnd.target !== element) {
+          return;
+        }
+
         // Step 2.1.0: Stop event propagation, bubbling will otherwise prevent parent animation
         evAnimEnd.stopPropagation();