@capgo/capacitor-transitions 8.1.8 → 8.1.9

package/dist/vue/index.mjs

@@ -677,6 +677,8 @@ var DEFAULT_CONFIG = {
   useViewTransitions: false,
   detectPlatform
 };
+var IOS_RELEASE_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+var IOS_CANCEL_EASING = "cubic-bezier(1, 0, 0.68, 0.28)";
 var TransitionController = class {
   config;
   pageStack = [];
@@ -1045,8 +1047,13 @@ var TransitionController = class {
       }
       return;
     }
+    const releaseEasing = targetProgress === 1 ? IOS_RELEASE_EASING : IOS_CANCEL_EASING;
     const finished = transition.animations.map((animation, index) => {
       const duration = transition.animationDurations[index] ?? transition.duration;
+      this.applyInteractiveReleaseEasing(animation, releaseEasing);
+      const currentProgress = duration > 0 ? transition.progress : targetProgress;
+      const easedStep = this.getIOSReleaseTimeForProgress(currentProgress, targetProgress);
+      animation.currentTime = duration * easedStep;
       const currentTime = typeof animation.currentTime === "number" ? animation.currentTime : 0;
       const targetTime = duration * targetProgress;
       const distance = Math.abs(targetTime - currentTime);
@@ -1061,6 +1068,33 @@ var TransitionController = class {
     await Promise.all(finished);
     transition.progress = targetProgress;
   }
+  applyInteractiveReleaseEasing(animation, easing) {
+    animation.effect?.updateTiming({ easing });
+  }
+  getIOSReleaseTimeForProgress(progress, targetProgress) {
+    const clampedProgress = Math.max(0, Math.min(progress, 0.9999));
+    if (targetProgress === 1) {
+      return this.getCubicBezierTimeForProgress(clampedProgress, 0.32, 0.72, 0, 1);
+    }
+    return this.getCubicBezierTimeForProgress(clampedProgress, 1, 0, 0.68, 0.28);
+  }
+  getCubicBezierTimeForProgress(progress, x1, y1, x2, y2) {
+    let low = 0;
+    let high = 1;
+    for (let iteration = 0; iteration < 16; iteration += 1) {
+      const mid = (low + high) / 2;
+      if (this.sampleCubicBezier(mid, y1, y2) < progress) {
+        low = mid;
+      } else {
+        high = mid;
+      }
+    }
+    return this.sampleCubicBezier((low + high) / 2, x1, x2);
+  }
+  sampleCubicBezier(time, point1, point2) {
+    const inverseTime = 1 - time;
+    return 3 * inverseTime * inverseTime * time * point1 + 3 * inverseTime * time * time * point2 + time * time * time;
+  }
   /**
    * Resolve configured easing presets after platform/direction are known.
    */
@@ -1848,6 +1882,7 @@ var CapRouterOutlet = class extends HTMLElement {
       this.cancelSwipeGesture(event.pointerId);
       return;
     }
+    let transitionStartedOnThisMove = false;
     if (!pointer.dragging && deltaX > this.swipeGestureThreshold && absX > absY) {
       if (!this.getSwipeBackDestination()) {
         this.cancelSwipeGesturePointer(event.pointerId);
@@ -1855,6 +1890,7 @@ var CapRouterOutlet = class extends HTMLElement {
       }
       pointer.dragging = true;
       pointer.transitionStarted = this.controller.beginInteractiveBack({ direction: "back" });
+      transitionStartedOnThisMove = pointer.transitionStarted;
       if (!pointer.transitionStarted) {
         this.cancelSwipeGesturePointer(event.pointerId);
         return;
@@ -1866,7 +1902,12 @@ var CapRouterOutlet = class extends HTMLElement {
         return;
       }
       if (event.cancelable) event.preventDefault();
-      this.queueSwipeGestureStep(deltaX / pointer.width);
+      const step = deltaX / pointer.width;
+      if (transitionStartedOnThisMove) {
+        this.controller.stepInteractiveBack(step);
+      } else {
+        this.queueSwipeGestureStep(step);
+      }
     }
   };
   handleSwipeGesturePointerEnd = (event) => {