@capgo/capacitor-transitions 8.1.7 → 8.1.9
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 +14 -0
- 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 +2 -2
- package/dist/chunk-B6BVMPJ3.mjs.map +0 -1
- /package/dist/{components-HRZG74NZ.mjs.map → components-RQK2XQL4.mjs.map} +0 -0
package/dist/svelte/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/svelte/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/svelte/index.js
CHANGED
|
@@ -712,6 +712,8 @@ var DEFAULT_CONFIG = {
|
|
|
712
712
|
useViewTransitions: false,
|
|
713
713
|
detectPlatform
|
|
714
714
|
};
|
|
715
|
+
var IOS_RELEASE_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
|
|
716
|
+
var IOS_CANCEL_EASING = "cubic-bezier(1, 0, 0.68, 0.28)";
|
|
715
717
|
var TransitionController = class {
|
|
716
718
|
config;
|
|
717
719
|
pageStack = [];
|
|
@@ -1080,8 +1082,13 @@ var TransitionController = class {
|
|
|
1080
1082
|
}
|
|
1081
1083
|
return;
|
|
1082
1084
|
}
|
|
1085
|
+
const releaseEasing = targetProgress === 1 ? IOS_RELEASE_EASING : IOS_CANCEL_EASING;
|
|
1083
1086
|
const finished = transition.animations.map((animation, index) => {
|
|
1084
1087
|
const duration = transition.animationDurations[index] ?? transition.duration;
|
|
1088
|
+
this.applyInteractiveReleaseEasing(animation, releaseEasing);
|
|
1089
|
+
const currentProgress = duration > 0 ? transition.progress : targetProgress;
|
|
1090
|
+
const easedStep = this.getIOSReleaseTimeForProgress(currentProgress, targetProgress);
|
|
1091
|
+
animation.currentTime = duration * easedStep;
|
|
1085
1092
|
const currentTime = typeof animation.currentTime === "number" ? animation.currentTime : 0;
|
|
1086
1093
|
const targetTime = duration * targetProgress;
|
|
1087
1094
|
const distance = Math.abs(targetTime - currentTime);
|
|
@@ -1096,6 +1103,33 @@ var TransitionController = class {
|
|
|
1096
1103
|
await Promise.all(finished);
|
|
1097
1104
|
transition.progress = targetProgress;
|
|
1098
1105
|
}
|
|
1106
|
+
applyInteractiveReleaseEasing(animation, easing) {
|
|
1107
|
+
animation.effect?.updateTiming({ easing });
|
|
1108
|
+
}
|
|
1109
|
+
getIOSReleaseTimeForProgress(progress, targetProgress) {
|
|
1110
|
+
const clampedProgress = Math.max(0, Math.min(progress, 0.9999));
|
|
1111
|
+
if (targetProgress === 1) {
|
|
1112
|
+
return this.getCubicBezierTimeForProgress(clampedProgress, 0.32, 0.72, 0, 1);
|
|
1113
|
+
}
|
|
1114
|
+
return this.getCubicBezierTimeForProgress(clampedProgress, 1, 0, 0.68, 0.28);
|
|
1115
|
+
}
|
|
1116
|
+
getCubicBezierTimeForProgress(progress, x1, y1, x2, y2) {
|
|
1117
|
+
let low = 0;
|
|
1118
|
+
let high = 1;
|
|
1119
|
+
for (let iteration = 0; iteration < 16; iteration += 1) {
|
|
1120
|
+
const mid = (low + high) / 2;
|
|
1121
|
+
if (this.sampleCubicBezier(mid, y1, y2) < progress) {
|
|
1122
|
+
low = mid;
|
|
1123
|
+
} else {
|
|
1124
|
+
high = mid;
|
|
1125
|
+
}
|
|
1126
|
+
}
|
|
1127
|
+
return this.sampleCubicBezier((low + high) / 2, x1, x2);
|
|
1128
|
+
}
|
|
1129
|
+
sampleCubicBezier(time, point1, point2) {
|
|
1130
|
+
const inverseTime = 1 - time;
|
|
1131
|
+
return 3 * inverseTime * inverseTime * time * point1 + 3 * inverseTime * time * time * point2 + time * time * time;
|
|
1132
|
+
}
|
|
1099
1133
|
/**
|
|
1100
1134
|
* Resolve configured easing presets after platform/direction are known.
|
|
1101
1135
|
*/
|
|
@@ -1883,6 +1917,7 @@ var CapRouterOutlet = class extends HTMLElement {
|
|
|
1883
1917
|
this.cancelSwipeGesture(event.pointerId);
|
|
1884
1918
|
return;
|
|
1885
1919
|
}
|
|
1920
|
+
let transitionStartedOnThisMove = false;
|
|
1886
1921
|
if (!pointer.dragging && deltaX > this.swipeGestureThreshold && absX > absY) {
|
|
1887
1922
|
if (!this.getSwipeBackDestination()) {
|
|
1888
1923
|
this.cancelSwipeGesturePointer(event.pointerId);
|
|
@@ -1890,6 +1925,7 @@ var CapRouterOutlet = class extends HTMLElement {
|
|
|
1890
1925
|
}
|
|
1891
1926
|
pointer.dragging = true;
|
|
1892
1927
|
pointer.transitionStarted = this.controller.beginInteractiveBack({ direction: "back" });
|
|
1928
|
+
transitionStartedOnThisMove = pointer.transitionStarted;
|
|
1893
1929
|
if (!pointer.transitionStarted) {
|
|
1894
1930
|
this.cancelSwipeGesturePointer(event.pointerId);
|
|
1895
1931
|
return;
|
|
@@ -1901,7 +1937,12 @@ var CapRouterOutlet = class extends HTMLElement {
|
|
|
1901
1937
|
return;
|
|
1902
1938
|
}
|
|
1903
1939
|
if (event.cancelable) event.preventDefault();
|
|
1904
|
-
|
|
1940
|
+
const step = deltaX / pointer.width;
|
|
1941
|
+
if (transitionStartedOnThisMove) {
|
|
1942
|
+
this.controller.stepInteractiveBack(step);
|
|
1943
|
+
} else {
|
|
1944
|
+
this.queueSwipeGestureStep(step);
|
|
1945
|
+
}
|
|
1905
1946
|
}
|
|
1906
1947
|
};
|
|
1907
1948
|
handleSwipeGesturePointerEnd = (event) => {
|