fix(events): touchmove position while transition

tech-systems · Nov 10, 2021 · 7c367a3 · 7c367a3
1 parent 1b0d082
commit 7c367a3
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 40 deletions.
diff --git a/dist/cupertino-pane.esm.js b/dist/cupertino-pane.esm.js
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: November 9, 2021
+ * Released on: November 11, 2021
  */
 
 /*! *****************************************************************************
@@ -426,10 +426,19 @@ class Events {
             return;
         }
         let newVal = this.instance.getPanelTransformY() + diffY;
-        // Patch for 'touchmove' first event 
-        // when start slowly events with small velocity
-        if (this.steps.length < 2 && velocityY < 1) {
-            newVal = this.instance.getPanelTransformY() + (diffY * velocityY);
+        // First event after touchmove only
+        if (this.steps.length < 2) {
+            // Patch for 'touchmove' first event 
+            // when start slowly events with small velocity
+            if (velocityY < 1) {
+                newVal = this.instance.getPanelTransformY() + (diffY * velocityY);
+            }
+            // Move while transition patch next transitions
+            let computedTranslateY = new WebKitCSSMatrix(window.getComputedStyle(this.instance.paneEl).transform).m42;
+            let transitionYDiff = computedTranslateY - this.instance.getPanelTransformY();
+            if (Math.abs(transitionYDiff)) {
+                newVal += transitionYDiff;
+            }
         }
         // Detect if input was blured
         // TODO: Check that blured from pane child instance
@@ -1335,7 +1344,7 @@ class CupertinoPane {
                 this.followerEl = document.querySelector(this.settings.followerElement);
                 this.followerEl.style.willChange = 'transform, border-radius';
                 this.followerEl.style.transform = `translateY(0px) translateZ(0px)`;
-                this.followerEl.style.transition = `all ${this.settings.animationDuration}ms ${this.getTimingFunction((_a = this.settings.breaks[this.currentBreak()]) === null || _a === void 0 ? void 0 : _a.bounce)} 0s`;
+                this.followerEl.style.transition = this.buildTransitionValue((_a = this.settings.breaks[this.currentBreak()]) === null || _a === void 0 ? void 0 : _a.bounce);
             }
             // Assign multiplicators for push elements
             if (this.settings.zStack) {
@@ -1469,8 +1478,11 @@ class CupertinoPane {
     /**
      * Private Utils methods
      */
-    getTimingFunction(bounce) {
-        return bounce ? 'cubic-bezier(0.175, 0.885, 0.370, 1.120)' : this.settings.animationType;
+    buildTransitionValue(bounce) {
+        if (bounce) {
+            return `all 300ms cubic-bezier(.155,1.105,.295,1.12)`;
+        }
+        return `all ${this.settings.animationDuration}ms ${this.settings.animationType}`;
     }
     isBackdropPresented() {
         return document.querySelector(`.cupertino-pane-wrapper .backdrop`)
@@ -1835,12 +1847,11 @@ class CupertinoPane {
                 // Get timing function && push for next 
                 const nextBreak = Object.entries(this.breakpoints.breaks).find(val => val[1] === params.translateY);
                 let bounce = nextBreak && ((_a = this.settings.breaks[nextBreak[0]]) === null || _a === void 0 ? void 0 : _a.bounce);
-                const timingForNext = this.getTimingFunction(bounce);
                 // style
-                this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${timingForNext} 0s`;
+                this.paneEl.style.transition = this.buildTransitionValue(bounce);
                 // Bind for follower same transitions
                 if (this.followerEl) {
-                    this.followerEl.style.transition = `transform ${this.settings.animationDuration}ms ${timingForNext} 0s`;
+                    this.followerEl.style.transition = this.buildTransitionValue(bounce);
                 }
                 // Push transition
                 if (this.settings.zStack) {

diff --git a/dist/cupertino-pane.esm.min.js b/dist/cupertino-pane.esm.min.js
diff --git a/dist/cupertino-pane.esm.min.js.map b/dist/cupertino-pane.esm.min.js.map
diff --git a/dist/cupertino-pane.js b/dist/cupertino-pane.js
diff --git a/dist/cupertino-pane.js.map b/dist/cupertino-pane.js.map
diff --git a/dist/cupertino-pane.min.js b/dist/cupertino-pane.min.js
diff --git a/dist/types/cupertino-pane.d.ts b/dist/types/cupertino-pane.d.ts
@@ -39,7 +39,7 @@ export declare class CupertinoPane {
     /**
      * Private Utils methods
      */
-    private getTimingFunction;
+    private buildTransitionValue;
     private isBackdropPresented;
     private renderBackdrop;
     /**

diff --git a/dist/types/index.d.ts b/dist/types/index.d.ts
@@ -110,7 +110,7 @@ declare class CupertinoPane {
     /**
      * Private Utils methods
      */
-    private getTimingFunction;
+    private buildTransitionValue;
     private isBackdropPresented;
     private renderBackdrop;
     /**

diff --git a/src/cupertino-pane.ts b/src/cupertino-pane.ts
@@ -286,7 +286,7 @@ export class CupertinoPane {
         );
         this.followerEl.style.willChange = 'transform, border-radius';
         this.followerEl.style.transform = `translateY(0px) translateZ(0px)`;
-        this.followerEl.style.transition = `all ${this.settings.animationDuration}ms ${this.getTimingFunction(this.settings.breaks[this.currentBreak()]?.bounce)} 0s`;
+        this.followerEl.style.transition = this.buildTransitionValue(this.settings.breaks[this.currentBreak()]?.bounce);
       }
 
       // Assign multiplicators for push elements
@@ -493,8 +493,12 @@ export class CupertinoPane {
   /**
    * Private Utils methods
    */  
-  private getTimingFunction(bounce) {
-    return bounce ? 'cubic-bezier(0.175, 0.885, 0.370, 1.120)' : this.settings.animationType;
+  private buildTransitionValue(bounce: boolean): string {
+    if (bounce) {
+      return `all 300ms cubic-bezier(.155,1.105,.295,1.12)`;
+    }
+
+    return `all ${this.settings.animationDuration}ms ${this.settings.animationType}`;
   }
 
   private isBackdropPresented() {
@@ -924,13 +928,12 @@ export class CupertinoPane {
           val => val[1] === params.translateY
         );
         let bounce = nextBreak && this.settings.breaks[nextBreak[0]]?.bounce;
-        const timingForNext = this.getTimingFunction(bounce);
 
         // style
-        this.paneEl.style.transition = `transform ${this.settings.animationDuration}ms ${timingForNext} 0s`;
+        this.paneEl.style.transition = this.buildTransitionValue(bounce);
         // Bind for follower same transitions
         if (this.followerEl) {
-          this.followerEl.style.transition = `transform ${this.settings.animationDuration}ms ${timingForNext} 0s`;
+          this.followerEl.style.transition = this.buildTransitionValue(bounce);
         }
 
         // Push transition

diff --git a/src/events.ts b/src/events.ts
@@ -255,10 +255,22 @@ export class Events {
 
     let newVal = this.instance.getPanelTransformY() + diffY;
 
-    // Patch for 'touchmove' first event 
-    // when start slowly events with small velocity
-    if (this.steps.length < 2 && velocityY < 1) {
-      newVal = this.instance.getPanelTransformY() + (diffY * velocityY);
+    // First event after touchmove only
+    if (this.steps.length < 2) {
+      // Patch for 'touchmove' first event 
+      // when start slowly events with small velocity
+      if (velocityY < 1) {
+        newVal = this.instance.getPanelTransformY() + (diffY * velocityY);
+      }
+
+      // Move while transition patch next transitions
+      let computedTranslateY = new WebKitCSSMatrix(
+        window.getComputedStyle(this.instance.paneEl).transform
+      ).m42;
+      let transitionYDiff = computedTranslateY - this.instance.getPanelTransformY();
+      if (Math.abs(transitionYDiff)) {
+        newVal += transitionYDiff;
+      }
     }
 
     // Detect if input was blured