@capgo/capacitor-transitions 8.1.8 → 8.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -8
- package/dist/{chunk-B6BVMPJ3.mjs → chunk-E66LWAUW.mjs} +43 -2
- package/dist/chunk-E66LWAUW.mjs.map +1 -0
- package/dist/{components-HRZG74NZ.mjs → components-RQK2XQL4.mjs} +2 -2
- package/dist/index.d.mts +4 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +43 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/react/index.d.mts +4 -0
- package/dist/react/index.d.ts +4 -0
- package/dist/react/index.js +42 -1
- package/dist/react/index.js.map +1 -1
- package/dist/react/index.mjs +42 -1
- package/dist/react/index.mjs.map +1 -1
- package/dist/solid/index.d.mts +4 -0
- package/dist/solid/index.d.ts +4 -0
- package/dist/solid/index.js +42 -1
- package/dist/solid/index.js.map +1 -1
- package/dist/solid/index.mjs +42 -1
- package/dist/solid/index.mjs.map +1 -1
- package/dist/svelte/index.d.mts +4 -0
- package/dist/svelte/index.d.ts +4 -0
- package/dist/svelte/index.js +42 -1
- package/dist/svelte/index.js.map +1 -1
- package/dist/svelte/index.mjs +42 -1
- package/dist/svelte/index.mjs.map +1 -1
- package/dist/vue/index.d.mts +4 -0
- package/dist/vue/index.d.ts +4 -0
- package/dist/vue/index.js +42 -1
- package/dist/vue/index.js.map +1 -1
- package/dist/vue/index.mjs +42 -1
- package/dist/vue/index.mjs.map +1 -1
- package/package.json +8 -2
- package/dist/chunk-B6BVMPJ3.mjs.map +0 -1
- /package/dist/{components-HRZG74NZ.mjs.map → components-RQK2XQL4.mjs.map} +0 -0
package/dist/solid/index.d.mts
CHANGED
|
@@ -201,6 +201,10 @@ declare class TransitionController {
|
|
|
201
201
|
private updatePageVisibility;
|
|
202
202
|
private getAnimationDuration;
|
|
203
203
|
private playInteractiveAnimationsTo;
|
|
204
|
+
private applyInteractiveReleaseEasing;
|
|
205
|
+
private getIOSReleaseTimeForProgress;
|
|
206
|
+
private getCubicBezierTimeForProgress;
|
|
207
|
+
private sampleCubicBezier;
|
|
204
208
|
/**
|
|
205
209
|
* Resolve configured easing presets after platform/direction are known.
|
|
206
210
|
*/
|
package/dist/solid/index.d.ts
CHANGED
|
@@ -201,6 +201,10 @@ declare class TransitionController {
|
|
|
201
201
|
private updatePageVisibility;
|
|
202
202
|
private getAnimationDuration;
|
|
203
203
|
private playInteractiveAnimationsTo;
|
|
204
|
+
private applyInteractiveReleaseEasing;
|
|
205
|
+
private getIOSReleaseTimeForProgress;
|
|
206
|
+
private getCubicBezierTimeForProgress;
|
|
207
|
+
private sampleCubicBezier;
|
|
204
208
|
/**
|
|
205
209
|
* Resolve configured easing presets after platform/direction are known.
|
|
206
210
|
*/
|
package/dist/solid/index.js
CHANGED
|
@@ -711,6 +711,8 @@ var DEFAULT_CONFIG = {
|
|
|
711
711
|
useViewTransitions: false,
|
|
712
712
|
detectPlatform
|
|
713
713
|
};
|
|
714
|
+
var IOS_RELEASE_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
|
|
715
|
+
var IOS_CANCEL_EASING = "cubic-bezier(1, 0, 0.68, 0.28)";
|
|
714
716
|
var TransitionController = class {
|
|
715
717
|
config;
|
|
716
718
|
pageStack = [];
|
|
@@ -1079,8 +1081,13 @@ var TransitionController = class {
|
|
|
1079
1081
|
}
|
|
1080
1082
|
return;
|
|
1081
1083
|
}
|
|
1084
|
+
const releaseEasing = targetProgress === 1 ? IOS_RELEASE_EASING : IOS_CANCEL_EASING;
|
|
1082
1085
|
const finished = transition.animations.map((animation, index) => {
|
|
1083
1086
|
const duration = transition.animationDurations[index] ?? transition.duration;
|
|
1087
|
+
this.applyInteractiveReleaseEasing(animation, releaseEasing);
|
|
1088
|
+
const currentProgress = duration > 0 ? transition.progress : targetProgress;
|
|
1089
|
+
const easedStep = this.getIOSReleaseTimeForProgress(currentProgress, targetProgress);
|
|
1090
|
+
animation.currentTime = duration * easedStep;
|
|
1084
1091
|
const currentTime = typeof animation.currentTime === "number" ? animation.currentTime : 0;
|
|
1085
1092
|
const targetTime = duration * targetProgress;
|
|
1086
1093
|
const distance = Math.abs(targetTime - currentTime);
|
|
@@ -1095,6 +1102,33 @@ var TransitionController = class {
|
|
|
1095
1102
|
await Promise.all(finished);
|
|
1096
1103
|
transition.progress = targetProgress;
|
|
1097
1104
|
}
|
|
1105
|
+
applyInteractiveReleaseEasing(animation, easing) {
|
|
1106
|
+
animation.effect?.updateTiming({ easing });
|
|
1107
|
+
}
|
|
1108
|
+
getIOSReleaseTimeForProgress(progress, targetProgress) {
|
|
1109
|
+
const clampedProgress = Math.max(0, Math.min(progress, 0.9999));
|
|
1110
|
+
if (targetProgress === 1) {
|
|
1111
|
+
return this.getCubicBezierTimeForProgress(clampedProgress, 0.32, 0.72, 0, 1);
|
|
1112
|
+
}
|
|
1113
|
+
return this.getCubicBezierTimeForProgress(clampedProgress, 1, 0, 0.68, 0.28);
|
|
1114
|
+
}
|
|
1115
|
+
getCubicBezierTimeForProgress(progress, x1, y1, x2, y2) {
|
|
1116
|
+
let low = 0;
|
|
1117
|
+
let high = 1;
|
|
1118
|
+
for (let iteration = 0; iteration < 16; iteration += 1) {
|
|
1119
|
+
const mid = (low + high) / 2;
|
|
1120
|
+
if (this.sampleCubicBezier(mid, y1, y2) < progress) {
|
|
1121
|
+
low = mid;
|
|
1122
|
+
} else {
|
|
1123
|
+
high = mid;
|
|
1124
|
+
}
|
|
1125
|
+
}
|
|
1126
|
+
return this.sampleCubicBezier((low + high) / 2, x1, x2);
|
|
1127
|
+
}
|
|
1128
|
+
sampleCubicBezier(time, point1, point2) {
|
|
1129
|
+
const inverseTime = 1 - time;
|
|
1130
|
+
return 3 * inverseTime * inverseTime * time * point1 + 3 * inverseTime * time * time * point2 + time * time * time;
|
|
1131
|
+
}
|
|
1098
1132
|
/**
|
|
1099
1133
|
* Resolve configured easing presets after platform/direction are known.
|
|
1100
1134
|
*/
|
|
@@ -1882,6 +1916,7 @@ var CapRouterOutlet = class extends HTMLElement {
|
|
|
1882
1916
|
this.cancelSwipeGesture(event.pointerId);
|
|
1883
1917
|
return;
|
|
1884
1918
|
}
|
|
1919
|
+
let transitionStartedOnThisMove = false;
|
|
1885
1920
|
if (!pointer.dragging && deltaX > this.swipeGestureThreshold && absX > absY) {
|
|
1886
1921
|
if (!this.getSwipeBackDestination()) {
|
|
1887
1922
|
this.cancelSwipeGesturePointer(event.pointerId);
|
|
@@ -1889,6 +1924,7 @@ var CapRouterOutlet = class extends HTMLElement {
|
|
|
1889
1924
|
}
|
|
1890
1925
|
pointer.dragging = true;
|
|
1891
1926
|
pointer.transitionStarted = this.controller.beginInteractiveBack({ direction: "back" });
|
|
1927
|
+
transitionStartedOnThisMove = pointer.transitionStarted;
|
|
1892
1928
|
if (!pointer.transitionStarted) {
|
|
1893
1929
|
this.cancelSwipeGesturePointer(event.pointerId);
|
|
1894
1930
|
return;
|
|
@@ -1900,7 +1936,12 @@ var CapRouterOutlet = class extends HTMLElement {
|
|
|
1900
1936
|
return;
|
|
1901
1937
|
}
|
|
1902
1938
|
if (event.cancelable) event.preventDefault();
|
|
1903
|
-
|
|
1939
|
+
const step = deltaX / pointer.width;
|
|
1940
|
+
if (transitionStartedOnThisMove) {
|
|
1941
|
+
this.controller.stepInteractiveBack(step);
|
|
1942
|
+
} else {
|
|
1943
|
+
this.queueSwipeGestureStep(step);
|
|
1944
|
+
}
|
|
1904
1945
|
}
|
|
1905
1946
|
};
|
|
1906
1947
|
handleSwipeGesturePointerEnd = (event) => {
|