fix: Identify and stop the correct transition when multiple are fired

buffos · buffos · commit 932df81f84e6 · 2017-08-29T00:49:18.000+03:00
diff --git a/side-nav/side-nav.js b/side-nav/side-nav.js
@@ -41,6 +41,9 @@ class SideNav {
     this.currentX = 0;
     this.touchingSideNav = false;
 
+    this.transitionEndProperty = null;
+    this.transitionEndTime = 0;
+
     this.supportsPassive = undefined;
     this.addEventListeners();
   }
@@ -119,6 +122,13 @@ class SideNav {
   }
 
   onTransitionEnd (evt) {
+    if (evt.propertyName != this.transitionEndProperty && evt.elapsedTime!= this.transitionEndTime){
+      return;
+    }
+
+    this.transitionEndProperty = null;
+    this.transitionEndTime = 0;
+
     this.sideNavEl.classList.remove('side-nav--animatable');
     this.sideNavEl.removeEventListener('transitionend', this.onTransitionEnd);
   }
@@ -127,13 +137,22 @@ class SideNav {
     this.sideNavEl.classList.add('side-nav--animatable');
     this.sideNavEl.classList.add('side-nav--visible');
     this.detabinator.inert = false;
+
+    this.transitionEndProperty = 'transform';
+    // the duration of transition (make unique to distinguish transitions )
+    this.transitionEndTime = 0.33; 
+
     this.sideNavEl.addEventListener('transitionend', this.onTransitionEnd);
   }
 
   hideSideNav () {
     this.sideNavEl.classList.add('side-nav--animatable');
     this.sideNavEl.classList.remove('side-nav--visible');
     this.detabinator.inert = true;
+
+    this.transitionEndProperty = 'transform';
+    this.transitionEndTime = 0.13;
+
     this.sideNavEl.addEventListener('transitionend', this.onTransitionEnd);
   }
 }
