@ssgoi/core 6.7.0-beta.1 → 7.0.0-beta.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 +29 -9
- package/dist/animation/animation.d.ts +2 -2
- package/dist/animation/frame-scheduler.d.ts +36 -0
- package/dist/animation/frame-scheduler.d.ts.map +1 -0
- package/dist/animation/multi-animation.d.ts +3 -2
- package/dist/animation/multi-animation.d.ts.map +1 -1
- package/dist/animation/web-animation.d.ts +16 -4
- package/dist/animation/web-animation.d.ts.map +1 -1
- package/dist/index.cjs +15 -15
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1282 -1125
- package/dist/internal.cjs +1 -1
- package/dist/internal.d.ts +1 -1
- package/dist/internal.d.ts.map +1 -1
- package/dist/internal.js +502 -422
- package/dist/multi-animation-6124HEke.cjs +1 -0
- package/dist/multi-animation-ZFZBDBGr.js +439 -0
- package/dist/ssgoi-transition/create-ssgoi-transition-context.d.ts.map +1 -1
- package/dist/ssgoi-transition/navigation-direction.d.ts +13 -0
- package/dist/ssgoi-transition/navigation-direction.d.ts.map +1 -0
- package/dist/ssgoi-transition/path-pattern.d.ts +15 -0
- package/dist/ssgoi-transition/path-pattern.d.ts.map +1 -0
- package/dist/ssgoi-transition/resolve-transition-rule.d.ts +16 -0
- package/dist/ssgoi-transition/resolve-transition-rule.d.ts.map +1 -0
- package/dist/transitions/axis/index.d.ts +5 -7
- package/dist/transitions/axis/index.d.ts.map +1 -1
- package/dist/transitions/axis/types.d.ts +0 -1
- package/dist/transitions/axis/types.d.ts.map +1 -1
- package/dist/transitions/blind/index.d.ts +2 -3
- package/dist/transitions/blind/index.d.ts.map +1 -1
- package/dist/transitions/drill/index.d.ts +6 -7
- package/dist/transitions/drill/index.d.ts.map +1 -1
- package/dist/transitions/drill/provider/crossfade.d.ts.map +1 -1
- package/dist/transitions/drill/provider/parallax.d.ts.map +1 -1
- package/dist/transitions/drill/transition.d.ts.map +1 -1
- package/dist/transitions/drill/types.d.ts +0 -1
- package/dist/transitions/drill/types.d.ts.map +1 -1
- package/dist/transitions/fade/index.d.ts +3 -5
- package/dist/transitions/fade/index.d.ts.map +1 -1
- package/dist/transitions/film/index.d.ts +3 -5
- package/dist/transitions/film/index.d.ts.map +1 -1
- package/dist/transitions/hero/fit.d.ts +5 -0
- package/dist/transitions/hero/fit.d.ts.map +1 -0
- package/dist/transitions/hero/index.d.ts +3 -5
- package/dist/transitions/hero/index.d.ts.map +1 -1
- package/dist/transitions/hero/transition.d.ts +12 -1
- package/dist/transitions/hero/transition.d.ts.map +1 -1
- package/dist/transitions/hero/types.d.ts +2 -1
- package/dist/transitions/hero/types.d.ts.map +1 -1
- package/dist/transitions/jaemin/index.d.ts +3 -5
- package/dist/transitions/jaemin/index.d.ts.map +1 -1
- package/dist/transitions/media-geometry.d.ts +55 -0
- package/dist/transitions/media-geometry.d.ts.map +1 -0
- package/dist/transitions/rotate/index.d.ts +3 -5
- package/dist/transitions/rotate/index.d.ts.map +1 -1
- package/dist/transitions/scroll/index.d.ts +4 -5
- package/dist/transitions/scroll/index.d.ts.map +1 -1
- package/dist/transitions/scroll/transition.d.ts +1 -1
- package/dist/transitions/scroll/transition.d.ts.map +1 -1
- package/dist/transitions/sheet/index.d.ts +6 -7
- package/dist/transitions/sheet/index.d.ts.map +1 -1
- package/dist/transitions/sheet/provider/static.d.ts.map +1 -1
- package/dist/transitions/sheet/transition.d.ts.map +1 -1
- package/dist/transitions/sheet/types.d.ts +0 -1
- package/dist/transitions/sheet/types.d.ts.map +1 -1
- package/dist/transitions/slide/index.d.ts +3 -5
- package/dist/transitions/slide/index.d.ts.map +1 -1
- package/dist/transitions/slide/transition.d.ts +0 -1
- package/dist/transitions/slide/transition.d.ts.map +1 -1
- package/dist/transitions/strip/index.d.ts +3 -5
- package/dist/transitions/strip/index.d.ts.map +1 -1
- package/dist/transitions/utils.d.ts +3 -21
- package/dist/transitions/utils.d.ts.map +1 -1
- package/dist/transitions/zoom/index.d.ts +3 -4
- package/dist/transitions/zoom/index.d.ts.map +1 -1
- package/dist/transitions/zoom/provider/blur.d.ts.map +1 -1
- package/dist/transitions/zoom/transition.d.ts +6 -1
- package/dist/transitions/zoom/transition.d.ts.map +1 -1
- package/dist/transitions/zoom/types.d.ts +5 -0
- package/dist/transitions/zoom/types.d.ts.map +1 -1
- package/dist/transitions/zoom/zoom-element.d.ts +2 -2
- package/dist/transitions/zoom/zoom-element.d.ts.map +1 -1
- package/dist/types/index.d.ts +56 -9
- package/dist/types/index.d.ts.map +1 -1
- package/dist/utils/wait-paint.d.ts +8 -7
- package/dist/utils/wait-paint.d.ts.map +1 -1
- package/package.json +13 -14
- package/dist/multi-animation-1FueEz2Q.js +0 -367
- package/dist/multi-animation-qtH1IKNG.cjs +0 -1
- package/dist/ssgoi-transition/find-matching-transition.d.ts +0 -30
- package/dist/ssgoi-transition/find-matching-transition.d.ts.map +0 -1
- package/dist/ssgoi-transition/process-symmetric-transitions.d.ts +0 -7
- package/dist/ssgoi-transition/process-symmetric-transitions.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,72 +1,24 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { P as
|
|
5
|
-
import { A as
|
|
6
|
-
|
|
7
|
-
const n = [];
|
|
8
|
-
for (let s = 0; s < e.length; s++)
|
|
9
|
-
for (let o = s + 1; o < e.length; o++) {
|
|
10
|
-
const i = e[s], l = e[o];
|
|
11
|
-
!i || !l || n.push({
|
|
12
|
-
from: i,
|
|
13
|
-
to: l,
|
|
14
|
-
transition: t(),
|
|
15
|
-
symmetric: !0
|
|
16
|
-
});
|
|
17
|
-
}
|
|
18
|
-
return n;
|
|
19
|
-
}
|
|
20
|
-
function kt(e, t) {
|
|
21
|
-
return [
|
|
22
|
-
{
|
|
23
|
-
from: e.exit,
|
|
24
|
-
to: e.enter,
|
|
25
|
-
transition: t("enter")
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
from: e.enter,
|
|
29
|
-
to: e.exit,
|
|
30
|
-
transition: t("exit")
|
|
31
|
-
}
|
|
32
|
-
];
|
|
33
|
-
}
|
|
34
|
-
function ot(e, t, n) {
|
|
35
|
-
const s = [];
|
|
36
|
-
for (let o = 0; o < e.length; o++)
|
|
37
|
-
for (let i = o + 1; i < e.length; i++) {
|
|
38
|
-
const l = e[o], a = e[i];
|
|
39
|
-
!l || !a || s.push(
|
|
40
|
-
{
|
|
41
|
-
from: l,
|
|
42
|
-
to: a,
|
|
43
|
-
transition: n(t.forward)
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
from: a,
|
|
47
|
-
to: l,
|
|
48
|
-
transition: n(t.backward)
|
|
49
|
-
}
|
|
50
|
-
);
|
|
51
|
-
}
|
|
52
|
-
return s;
|
|
53
|
-
}
|
|
54
|
-
class z {
|
|
1
|
+
var se = Object.defineProperty;
|
|
2
|
+
var oe = (e, t, n) => t in e ? se(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
|
|
3
|
+
var E = (e, t, n) => oe(e, typeof t != "symbol" ? t + "" : t, n);
|
|
4
|
+
import { P as ct, V as kt, W as b, M as P, S as ie } from "./multi-animation-ZFZBDBGr.js";
|
|
5
|
+
import { A as mo } from "./multi-animation-ZFZBDBGr.js";
|
|
6
|
+
class X {
|
|
55
7
|
constructor(t) {
|
|
56
|
-
|
|
8
|
+
E(this, "omega");
|
|
57
9
|
// Angular frequency
|
|
58
|
-
|
|
10
|
+
E(this, "zeta");
|
|
59
11
|
// Damping ratio
|
|
60
|
-
|
|
61
|
-
|
|
12
|
+
E(this, "restDelta");
|
|
13
|
+
E(this, "restSpeed");
|
|
62
14
|
const { stiffness: n, damping: s } = t, o = 1;
|
|
63
|
-
this.omega = Math.sqrt(n / o), this.zeta = s / (2 * Math.sqrt(n * o)), this.restDelta = t.restDelta ??
|
|
15
|
+
this.omega = Math.sqrt(n / o), this.zeta = s / (2 * Math.sqrt(n * o)), this.restDelta = t.restDelta ?? ct, this.restSpeed = t.restSpeed ?? kt;
|
|
64
16
|
}
|
|
65
17
|
step(t, n, s) {
|
|
66
|
-
const o = Math.min(s, 0.033), { omega: i, zeta:
|
|
18
|
+
const o = Math.min(s, 0.033), { omega: i, zeta: r } = this, { position: l, velocity: c } = t, a = -2 * o * r * i * c, p = o * i * i * (n - l), d = c + a + p;
|
|
67
19
|
return {
|
|
68
|
-
position:
|
|
69
|
-
velocity:
|
|
20
|
+
position: l + o * d,
|
|
21
|
+
velocity: d
|
|
70
22
|
};
|
|
71
23
|
}
|
|
72
24
|
isSettled(t, n) {
|
|
@@ -74,20 +26,20 @@ class z {
|
|
|
74
26
|
return s < this.restDelta && o < this.restSpeed;
|
|
75
27
|
}
|
|
76
28
|
}
|
|
77
|
-
class
|
|
29
|
+
class re {
|
|
78
30
|
constructor(t) {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
this.restDelta = t.restDelta ??
|
|
31
|
+
E(this, "leader");
|
|
32
|
+
E(this, "follower");
|
|
33
|
+
E(this, "restDelta");
|
|
34
|
+
E(this, "restSpeed");
|
|
35
|
+
this.restDelta = t.restDelta ?? ct, this.restSpeed = t.restSpeed ?? kt, this.leader = new X({
|
|
84
36
|
stiffness: t.stiffness,
|
|
85
37
|
damping: t.damping,
|
|
86
38
|
restDelta: this.restDelta,
|
|
87
39
|
restSpeed: this.restSpeed
|
|
88
40
|
});
|
|
89
41
|
let n, s, o, i;
|
|
90
|
-
typeof t.follower == "number" ? (n = t.stiffness * t.follower, s = t.damping) : t.follower ? (n = t.follower.stiffness, s = t.follower.damping, o = t.follower.restDelta, i = t.follower.restSpeed) : (n = t.stiffness, s = t.damping), this.follower = new
|
|
42
|
+
typeof t.follower == "number" ? (n = t.stiffness * t.follower, s = t.damping) : t.follower ? (n = t.follower.stiffness, s = t.follower.damping, o = t.follower.restDelta, i = t.follower.restSpeed) : (n = t.stiffness, s = t.damping), this.follower = new X({
|
|
91
43
|
stiffness: n,
|
|
92
44
|
damping: s,
|
|
93
45
|
restDelta: o ?? this.restDelta,
|
|
@@ -98,15 +50,15 @@ class qt {
|
|
|
98
50
|
const i = t._leader ?? {
|
|
99
51
|
position: t.position,
|
|
100
52
|
velocity: t.velocity
|
|
101
|
-
},
|
|
53
|
+
}, r = this.leader.step(i, n, s), l = this.follower.step(
|
|
102
54
|
t,
|
|
103
|
-
|
|
55
|
+
r.position,
|
|
104
56
|
s
|
|
105
57
|
);
|
|
106
58
|
return {
|
|
107
|
-
position:
|
|
108
|
-
velocity:
|
|
109
|
-
_leader:
|
|
59
|
+
position: l.position,
|
|
60
|
+
velocity: l.velocity,
|
|
61
|
+
_leader: r
|
|
110
62
|
};
|
|
111
63
|
}
|
|
112
64
|
isSettled(t, n) {
|
|
@@ -114,46 +66,46 @@ class qt {
|
|
|
114
66
|
return s._leader ? Math.abs(n - s._leader.position) < this.restDelta && Math.abs(s._leader.velocity) < this.restSpeed && o : o;
|
|
115
67
|
}
|
|
116
68
|
}
|
|
117
|
-
const
|
|
118
|
-
class
|
|
69
|
+
const ae = 0.01, le = 500, ce = 10;
|
|
70
|
+
class pe {
|
|
119
71
|
constructor(t) {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
this.acceleration = t.acceleration, this.resistance = t.resistance, this.resistanceType = t.resistanceType ?? "quadratic", this.min = t.min, this.max = t.max, this.bounceStiffness = t.bounceStiffness ??
|
|
72
|
+
E(this, "acceleration");
|
|
73
|
+
E(this, "resistance");
|
|
74
|
+
E(this, "resistanceType");
|
|
75
|
+
E(this, "min");
|
|
76
|
+
E(this, "max");
|
|
77
|
+
E(this, "bounceStiffness");
|
|
78
|
+
E(this, "bounceDamping");
|
|
79
|
+
E(this, "restDelta");
|
|
80
|
+
this.acceleration = t.acceleration, this.resistance = t.resistance, this.resistanceType = t.resistanceType ?? "quadratic", this.min = t.min, this.max = t.max, this.bounceStiffness = t.bounceStiffness ?? le, this.bounceDamping = t.bounceDamping ?? ce, this.restDelta = t.restDelta ?? ae;
|
|
129
81
|
}
|
|
130
82
|
step(t, n, s) {
|
|
131
|
-
const o = Math.min(s, 0.033), { acceleration: i, resistance:
|
|
132
|
-
let
|
|
133
|
-
if (
|
|
134
|
-
const
|
|
135
|
-
|
|
83
|
+
const o = Math.min(s, 0.033), { acceleration: i, resistance: r, resistanceType: l, min: c, max: a } = this, { position: p, velocity: d } = t, u = c !== void 0 && p < c, h = a !== void 0 && p > a;
|
|
84
|
+
let f;
|
|
85
|
+
if (u || h) {
|
|
86
|
+
const g = p - (u ? c : a), $ = -this.bounceStiffness * g, x = -this.bounceDamping * d;
|
|
87
|
+
f = $ + x;
|
|
136
88
|
} else {
|
|
137
|
-
const S = n >
|
|
138
|
-
let
|
|
139
|
-
|
|
89
|
+
const S = n > p ? 1 : -1;
|
|
90
|
+
let g;
|
|
91
|
+
l === "linear" ? g = r * d : g = r * d * Math.abs(d), f = S * i - g;
|
|
140
92
|
}
|
|
141
|
-
const
|
|
142
|
-
let
|
|
143
|
-
if (!
|
|
144
|
-
const S = n >
|
|
145
|
-
(S > 0 &&
|
|
93
|
+
const y = d + f * o;
|
|
94
|
+
let m = p + y * o;
|
|
95
|
+
if (!u && !h) {
|
|
96
|
+
const S = n > p ? 1 : -1;
|
|
97
|
+
(S > 0 && m > n || S < 0 && m < n) && (m = n);
|
|
146
98
|
}
|
|
147
99
|
return {
|
|
148
|
-
position:
|
|
149
|
-
velocity:
|
|
100
|
+
position: m,
|
|
101
|
+
velocity: m === n ? 0 : y
|
|
150
102
|
};
|
|
151
103
|
}
|
|
152
104
|
isSettled(t, n) {
|
|
153
105
|
return Math.abs(n - t.position) < this.restDelta;
|
|
154
106
|
}
|
|
155
107
|
}
|
|
156
|
-
class
|
|
108
|
+
class w {
|
|
157
109
|
/**
|
|
158
110
|
* Create an Integrator from physics config
|
|
159
111
|
*
|
|
@@ -167,7 +119,7 @@ class g {
|
|
|
167
119
|
"Cannot use both 'spring' and 'inertia' together. Choose one physics type."
|
|
168
120
|
);
|
|
169
121
|
if (t.inertia)
|
|
170
|
-
return new
|
|
122
|
+
return new pe({
|
|
171
123
|
acceleration: t.inertia.acceleration,
|
|
172
124
|
resistance: t.inertia.resistance,
|
|
173
125
|
resistanceType: t.inertia.resistanceType,
|
|
@@ -184,7 +136,7 @@ class g {
|
|
|
184
136
|
return typeof s == "number" ? o = s : typeof s == "object" && (o = {
|
|
185
137
|
stiffness: s.stiffness,
|
|
186
138
|
damping: s.damping
|
|
187
|
-
}), new
|
|
139
|
+
}), new re({
|
|
188
140
|
stiffness: n.stiffness,
|
|
189
141
|
damping: n.damping,
|
|
190
142
|
follower: o,
|
|
@@ -192,7 +144,7 @@ class g {
|
|
|
192
144
|
restSpeed: n.restSpeed
|
|
193
145
|
});
|
|
194
146
|
}
|
|
195
|
-
return new
|
|
147
|
+
return new X({
|
|
196
148
|
stiffness: n.stiffness,
|
|
197
149
|
damping: n.damping,
|
|
198
150
|
restDelta: n.restDelta,
|
|
@@ -204,32 +156,32 @@ class g {
|
|
|
204
156
|
* @deprecated Use from({ spring: config }) instead
|
|
205
157
|
*/
|
|
206
158
|
static fromSpring(t) {
|
|
207
|
-
return
|
|
159
|
+
return w.from({ spring: t });
|
|
208
160
|
}
|
|
209
161
|
}
|
|
210
|
-
class
|
|
162
|
+
class de {
|
|
211
163
|
constructor(t) {
|
|
212
|
-
|
|
164
|
+
E(this, "durationSec");
|
|
213
165
|
this.durationSec = Math.max(1 / 60, t.durationSec);
|
|
214
166
|
}
|
|
215
167
|
step(t, n, s) {
|
|
216
168
|
const o = n - t.position;
|
|
217
169
|
if (o === 0) return t;
|
|
218
|
-
const i = Math.sign(o),
|
|
219
|
-
return (i > 0 ?
|
|
170
|
+
const i = Math.sign(o), r = Math.abs(o) / this.durationSec, l = i * r * s, c = t.position + l;
|
|
171
|
+
return (i > 0 ? c >= n : c <= n) ? { position: n, velocity: 0 } : { position: c, velocity: i * r };
|
|
220
172
|
}
|
|
221
173
|
isSettled(t, n) {
|
|
222
|
-
return Math.abs(t.position - n) <
|
|
174
|
+
return Math.abs(t.position - n) < ct;
|
|
223
175
|
}
|
|
224
176
|
}
|
|
225
|
-
function
|
|
177
|
+
function k(e, t) {
|
|
226
178
|
function n(i) {
|
|
227
|
-
let
|
|
228
|
-
const
|
|
229
|
-
let
|
|
230
|
-
for (;
|
|
231
|
-
|
|
232
|
-
return
|
|
179
|
+
let r = 0, l = 0;
|
|
180
|
+
const c = i.offsetWidth, a = i.offsetHeight;
|
|
181
|
+
let p = i;
|
|
182
|
+
for (; p; )
|
|
183
|
+
r += p.offsetTop, l += p.offsetLeft, p = p.offsetParent;
|
|
184
|
+
return r -= window.scrollY, l -= window.scrollX, { top: r, left: l, width: c, height: a };
|
|
233
185
|
}
|
|
234
186
|
const s = n(e), o = n(t);
|
|
235
187
|
return new DOMRect(
|
|
@@ -239,7 +191,7 @@ function N(e, t) {
|
|
|
239
191
|
o.height
|
|
240
192
|
);
|
|
241
193
|
}
|
|
242
|
-
function
|
|
194
|
+
function z(e, t) {
|
|
243
195
|
const n = e.getBoundingClientRect(), s = t.getBoundingClientRect(), o = e.offsetWidth > 0 ? n.width / e.offsetWidth : 1, i = e.offsetHeight > 0 ? n.height / e.offsetHeight : 1;
|
|
244
196
|
return new DOMRect(
|
|
245
197
|
(s.left - n.left) / o,
|
|
@@ -248,8 +200,8 @@ function rt(e, t) {
|
|
|
248
200
|
s.height / i
|
|
249
201
|
);
|
|
250
202
|
}
|
|
251
|
-
function
|
|
252
|
-
const { scrollingElement: n, positionedParent: s } = e, o = n !== s && n.contains(s) ?
|
|
203
|
+
function F(e, t) {
|
|
204
|
+
const { scrollingElement: n, positionedParent: s } = e, o = n !== s && n.contains(s) ? k(n, s).top : 0;
|
|
253
205
|
return {
|
|
254
206
|
top: e[t].scroll.y,
|
|
255
207
|
left: 0,
|
|
@@ -257,26 +209,26 @@ function T(e, t) {
|
|
|
257
209
|
height: n.clientHeight - o
|
|
258
210
|
};
|
|
259
211
|
}
|
|
260
|
-
function
|
|
261
|
-
const { scrollingElement: n, positionedParent: s } = e, o = n !== s && n.contains(s) ?
|
|
212
|
+
function Ht(e, t) {
|
|
213
|
+
const { scrollingElement: n, positionedParent: s } = e, o = n !== s && n.contains(s) ? k(n, s).top : 0;
|
|
262
214
|
return {
|
|
263
215
|
top: e[t].scroll.y - o,
|
|
264
216
|
height: n.clientHeight
|
|
265
217
|
};
|
|
266
218
|
}
|
|
267
|
-
const
|
|
219
|
+
const dt = 8, ut = {
|
|
268
220
|
spring: {
|
|
269
|
-
stiffness:
|
|
221
|
+
stiffness: 800,
|
|
270
222
|
damping: 40,
|
|
271
223
|
doubleSpring: 1.2,
|
|
272
224
|
restDelta: 0.1,
|
|
273
225
|
restSpeed: 0.1
|
|
274
226
|
}
|
|
275
227
|
};
|
|
276
|
-
function
|
|
228
|
+
function ue({
|
|
277
229
|
direction: e
|
|
278
230
|
}) {
|
|
279
|
-
const t = e === "forward" ?
|
|
231
|
+
const t = e === "forward" ? dt : -dt;
|
|
280
232
|
return {
|
|
281
233
|
out: {
|
|
282
234
|
willChange: "transform, opacity",
|
|
@@ -298,25 +250,25 @@ function te({
|
|
|
298
250
|
}
|
|
299
251
|
};
|
|
300
252
|
}
|
|
301
|
-
function
|
|
253
|
+
function fe() {
|
|
302
254
|
return {
|
|
303
|
-
outPhysics:
|
|
304
|
-
inPhysics:
|
|
255
|
+
outPhysics: ut,
|
|
256
|
+
inPhysics: ut,
|
|
305
257
|
// Both sides run together — the cross-fade is the whole point of the
|
|
306
258
|
// snappy feel. (fluid's sibling uses staggered fade-through.)
|
|
307
259
|
composition: { mode: "parallel", startAt: [0, 0] },
|
|
308
|
-
build:
|
|
260
|
+
build: ue
|
|
309
261
|
};
|
|
310
262
|
}
|
|
311
|
-
const
|
|
263
|
+
const ft = 30, he = {
|
|
312
264
|
inertia: { acceleration: 150, resistance: 1.5, restDelta: 0.1 }
|
|
313
|
-
},
|
|
265
|
+
}, ye = {
|
|
314
266
|
spring: { stiffness: 180, damping: 34, restDelta: 0.1, restSpeed: 0.1 }
|
|
315
267
|
};
|
|
316
|
-
function
|
|
268
|
+
function me({
|
|
317
269
|
direction: e
|
|
318
270
|
}) {
|
|
319
|
-
const t = e === "forward" ? 1 : -1, n = -
|
|
271
|
+
const t = e === "forward" ? 1 : -1, n = -ft * t, s = ft * t;
|
|
320
272
|
return {
|
|
321
273
|
out: {
|
|
322
274
|
willChange: "transform, opacity",
|
|
@@ -339,29 +291,29 @@ function oe({
|
|
|
339
291
|
}
|
|
340
292
|
};
|
|
341
293
|
}
|
|
342
|
-
function
|
|
294
|
+
function ge() {
|
|
343
295
|
return {
|
|
344
|
-
outPhysics:
|
|
345
|
-
inPhysics:
|
|
296
|
+
outPhysics: he,
|
|
297
|
+
inPhysics: ye,
|
|
346
298
|
// Phased motion: outgoing falls away first under inertia, then incoming
|
|
347
299
|
// springs in. The fade-through shape comes from the integrator curves
|
|
348
300
|
// plus the sequence handoff, not from FADE_SPLIT inside animate(t).
|
|
349
301
|
composition: { mode: "sequence" },
|
|
350
|
-
build:
|
|
302
|
+
build: me
|
|
351
303
|
};
|
|
352
304
|
}
|
|
353
|
-
const
|
|
354
|
-
snappy:
|
|
355
|
-
fluid:
|
|
356
|
-
},
|
|
305
|
+
const be = {
|
|
306
|
+
snappy: fe(),
|
|
307
|
+
fluid: ge()
|
|
308
|
+
}, ht = 8, we = {
|
|
357
309
|
inertia: { acceleration: 150, resistance: 1.5, restDelta: 0.1 }
|
|
358
|
-
},
|
|
310
|
+
}, Se = {
|
|
359
311
|
spring: { stiffness: 180, damping: 34, restDelta: 0.1, restSpeed: 0.1 }
|
|
360
312
|
};
|
|
361
|
-
function
|
|
313
|
+
function xe({
|
|
362
314
|
direction: e
|
|
363
315
|
}) {
|
|
364
|
-
const t = e === "forward" ? 1 : -1, n = -
|
|
316
|
+
const t = e === "forward" ? 1 : -1, n = -ht * t, s = ht * t;
|
|
365
317
|
return {
|
|
366
318
|
out: {
|
|
367
319
|
willChange: "transform, opacity",
|
|
@@ -384,21 +336,21 @@ function ce({
|
|
|
384
336
|
}
|
|
385
337
|
};
|
|
386
338
|
}
|
|
387
|
-
function
|
|
339
|
+
function Ce() {
|
|
388
340
|
return {
|
|
389
|
-
outPhysics:
|
|
390
|
-
inPhysics:
|
|
341
|
+
outPhysics: we,
|
|
342
|
+
inPhysics: Se,
|
|
391
343
|
composition: { mode: "sequence" },
|
|
392
|
-
build:
|
|
344
|
+
build: xe
|
|
393
345
|
};
|
|
394
346
|
}
|
|
395
|
-
const
|
|
347
|
+
const $e = 8, Ee = {
|
|
396
348
|
inertia: { acceleration: 150, resistance: 1.5, restDelta: 0.1 }
|
|
397
|
-
},
|
|
349
|
+
}, Pe = {
|
|
398
350
|
spring: { stiffness: 180, damping: 34, restDelta: 0.1, restSpeed: 0.1 }
|
|
399
351
|
};
|
|
400
|
-
function
|
|
401
|
-
const t =
|
|
352
|
+
function _e(e) {
|
|
353
|
+
const t = $e;
|
|
402
354
|
return {
|
|
403
355
|
out: {
|
|
404
356
|
willChange: "opacity",
|
|
@@ -420,32 +372,32 @@ function he(e) {
|
|
|
420
372
|
}
|
|
421
373
|
};
|
|
422
374
|
}
|
|
423
|
-
function
|
|
375
|
+
function Ae() {
|
|
424
376
|
return {
|
|
425
|
-
outPhysics:
|
|
426
|
-
inPhysics:
|
|
377
|
+
outPhysics: Ee,
|
|
378
|
+
inPhysics: Pe,
|
|
427
379
|
composition: { mode: "sequence" },
|
|
428
|
-
build:
|
|
380
|
+
build: _e
|
|
429
381
|
};
|
|
430
382
|
}
|
|
431
|
-
const
|
|
432
|
-
snappy:
|
|
433
|
-
directional:
|
|
434
|
-
"non-directional":
|
|
435
|
-
},
|
|
383
|
+
const yt = Ce(), Ie = {
|
|
384
|
+
snappy: yt,
|
|
385
|
+
directional: yt,
|
|
386
|
+
"non-directional": Ae()
|
|
387
|
+
}, mt = {
|
|
436
388
|
spring: { stiffness: 280, damping: 30, restDelta: 0.1, restSpeed: 0.1 }
|
|
437
|
-
},
|
|
438
|
-
function
|
|
389
|
+
}, W = 0.1, Z = 1 / 3, gt = (e) => Math.max(0, Math.min(1, e));
|
|
390
|
+
function Re({
|
|
439
391
|
direction: e
|
|
440
392
|
}) {
|
|
441
|
-
const t = e === "forward" ? 1 : -1, n = 1 - t *
|
|
393
|
+
const t = e === "forward" ? 1 : -1, n = 1 - t * W;
|
|
442
394
|
return {
|
|
443
395
|
out: {
|
|
444
396
|
willChange: "transform, opacity",
|
|
445
397
|
startStyle: {},
|
|
446
398
|
animate: (s) => ({
|
|
447
|
-
transform: `scale(${1 + t * s *
|
|
448
|
-
opacity: `${
|
|
399
|
+
transform: `scale(${1 + t * s * W})`,
|
|
400
|
+
opacity: `${gt(1 - s / Z)}`
|
|
449
401
|
})
|
|
450
402
|
},
|
|
451
403
|
in: {
|
|
@@ -455,130 +407,130 @@ function ge({
|
|
|
455
407
|
opacity: "0"
|
|
456
408
|
},
|
|
457
409
|
animate: (s) => ({
|
|
458
|
-
transform: `scale(${n + t * s *
|
|
459
|
-
opacity: `${
|
|
410
|
+
transform: `scale(${n + t * s * W})`,
|
|
411
|
+
opacity: `${gt((s - Z) / (1 - Z))}`
|
|
460
412
|
})
|
|
461
413
|
}
|
|
462
414
|
};
|
|
463
415
|
}
|
|
464
|
-
function
|
|
416
|
+
function ve() {
|
|
465
417
|
return {
|
|
466
|
-
outPhysics:
|
|
467
|
-
inPhysics:
|
|
418
|
+
outPhysics: mt,
|
|
419
|
+
inPhysics: mt,
|
|
468
420
|
// Scale must move together on both sides; fade-through is encoded inside
|
|
469
421
|
// each tick (piecewise), not via composition staggering — so parallel.
|
|
470
422
|
composition: { mode: "parallel" },
|
|
471
|
-
build:
|
|
423
|
+
build: Re
|
|
472
424
|
};
|
|
473
425
|
}
|
|
474
|
-
const
|
|
426
|
+
const bt = {
|
|
475
427
|
spring: { stiffness: 280, damping: 30, restDelta: 0.1, restSpeed: 0.1 }
|
|
476
|
-
},
|
|
477
|
-
function
|
|
428
|
+
}, G = 0.1, j = 1 / 3, wt = (e) => Math.max(0, Math.min(1, e));
|
|
429
|
+
function Oe() {
|
|
478
430
|
return {
|
|
479
431
|
out: {
|
|
480
432
|
willChange: "opacity",
|
|
481
433
|
startStyle: {},
|
|
482
434
|
animate: (e) => ({
|
|
483
|
-
opacity: `${
|
|
435
|
+
opacity: `${wt(1 - e / j)}`
|
|
484
436
|
})
|
|
485
437
|
},
|
|
486
438
|
in: {
|
|
487
439
|
willChange: "transform, opacity",
|
|
488
440
|
startStyle: {
|
|
489
|
-
transform: `scale(${1 -
|
|
441
|
+
transform: `scale(${1 - G})`,
|
|
490
442
|
opacity: "0"
|
|
491
443
|
},
|
|
492
444
|
animate: (e) => ({
|
|
493
|
-
transform: `scale(${1 -
|
|
494
|
-
opacity: `${
|
|
445
|
+
transform: `scale(${1 - G + e * G})`,
|
|
446
|
+
opacity: `${wt((e - j) / (1 - j))}`
|
|
495
447
|
})
|
|
496
448
|
}
|
|
497
449
|
};
|
|
498
450
|
}
|
|
499
|
-
function
|
|
451
|
+
function De() {
|
|
500
452
|
return {
|
|
501
|
-
outPhysics:
|
|
502
|
-
inPhysics:
|
|
453
|
+
outPhysics: bt,
|
|
454
|
+
inPhysics: bt,
|
|
503
455
|
composition: { mode: "parallel" },
|
|
504
|
-
build:
|
|
456
|
+
build: Oe
|
|
505
457
|
};
|
|
506
458
|
}
|
|
507
|
-
const
|
|
508
|
-
snappy:
|
|
509
|
-
directional:
|
|
510
|
-
"non-directional":
|
|
511
|
-
},
|
|
512
|
-
x:
|
|
513
|
-
y:
|
|
514
|
-
z:
|
|
459
|
+
const St = ve(), Fe = {
|
|
460
|
+
snappy: St,
|
|
461
|
+
directional: St,
|
|
462
|
+
"non-directional": De()
|
|
463
|
+
}, Te = {
|
|
464
|
+
x: be,
|
|
465
|
+
y: Ie,
|
|
466
|
+
z: Fe
|
|
515
467
|
};
|
|
516
|
-
function
|
|
517
|
-
const n =
|
|
468
|
+
function Me(e, t) {
|
|
469
|
+
const n = Te[e];
|
|
518
470
|
return n[t] ?? n.snappy;
|
|
519
471
|
}
|
|
520
|
-
const
|
|
521
|
-
function
|
|
472
|
+
const Ye = "x", Le = "snappy";
|
|
473
|
+
function xt(e, t) {
|
|
522
474
|
e.style.willChange = t.willChange, e.style.backfaceVisibility = "hidden", e.style.contain = "layout paint";
|
|
523
475
|
for (const [n, s] of Object.entries(t.startStyle))
|
|
524
476
|
e.style[n] = s;
|
|
525
477
|
}
|
|
526
|
-
function
|
|
478
|
+
function Nt(e) {
|
|
527
479
|
e.style.willChange = "auto", e.style.backfaceVisibility = "", e.style.contain = "", e.style.transform = "", e.style.opacity = "", e.style.clipPath = "";
|
|
528
480
|
}
|
|
529
|
-
function
|
|
530
|
-
|
|
481
|
+
function ke(e) {
|
|
482
|
+
Nt(e), e.style.pointerEvents = "";
|
|
531
483
|
}
|
|
532
|
-
const
|
|
533
|
-
const t = e.
|
|
484
|
+
const He = (e = {}) => {
|
|
485
|
+
const t = e.type ?? Ye, n = e.feel ?? Le, s = Me(t, n);
|
|
534
486
|
return {
|
|
535
|
-
prepare: ({ from:
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
487
|
+
prepare: ({ from: o, to: i, context: r }) => {
|
|
488
|
+
const l = s.build({ direction: r.direction });
|
|
489
|
+
return o.then((c) => {
|
|
490
|
+
xt(c, l.out), c.style.pointerEvents = "none";
|
|
491
|
+
}), i.then((c) => {
|
|
492
|
+
xt(c, l.in);
|
|
493
|
+
}), {};
|
|
494
|
+
},
|
|
495
|
+
animation: ({ from: o, to: i, context: r }) => {
|
|
496
|
+
const l = s.build({ direction: r.direction });
|
|
497
|
+
if (t === "z") {
|
|
498
|
+
const p = F(r, "from"), d = F(r, "to");
|
|
499
|
+
o.style.clipPath = `inset(${p.top}px 0 calc(100% - ${p.top + p.height}px) 0)`, i.style.clipPath = `inset(${d.top}px 0 calc(100% - ${d.top + d.height}px) 0)`;
|
|
544
500
|
}
|
|
545
|
-
const c = new
|
|
546
|
-
element:
|
|
547
|
-
integrator:
|
|
548
|
-
style: (p) =>
|
|
501
|
+
const c = new b({
|
|
502
|
+
element: o,
|
|
503
|
+
integrator: w.from(s.outPhysics),
|
|
504
|
+
style: (p) => l.out.animate(p),
|
|
549
505
|
// Restore the reused from node's inline styles on complete. This
|
|
550
506
|
// covers willChange/backfaceVisibility/contain/transform/opacity (from
|
|
551
507
|
// applyStartStyle + the WAAPI final frame), pointerEvents (set in
|
|
552
508
|
// prepare), and clipPath (set above for z; harmless no-op otherwise).
|
|
553
|
-
onComplete: () =>
|
|
554
|
-
}),
|
|
555
|
-
element:
|
|
556
|
-
integrator:
|
|
557
|
-
style: (p) =>
|
|
558
|
-
onComplete: () =>
|
|
509
|
+
onComplete: () => ke(o)
|
|
510
|
+
}), a = new b({
|
|
511
|
+
element: i,
|
|
512
|
+
integrator: w.from(s.inPhysics),
|
|
513
|
+
style: (p) => l.in.animate(p),
|
|
514
|
+
onComplete: () => Nt(i)
|
|
559
515
|
});
|
|
560
|
-
return new
|
|
516
|
+
return new P([c, a], s.composition);
|
|
561
517
|
}
|
|
562
518
|
};
|
|
563
519
|
};
|
|
564
|
-
function
|
|
520
|
+
function Ne(e, t, n) {
|
|
565
521
|
return e === "y" ? t === "non-directional" ? "non-directional" : "directional" : e !== "x" || t === "snappy" || n === "snappy" ? "snappy" : "fluid";
|
|
566
522
|
}
|
|
567
|
-
function
|
|
568
|
-
const
|
|
569
|
-
return
|
|
570
|
-
t,
|
|
571
|
-
{ forward: "forward", backward: "backward" },
|
|
572
|
-
(l) => Ie({ type: n, direction: l, feel: i })
|
|
573
|
-
);
|
|
523
|
+
function to(e = {}) {
|
|
524
|
+
const t = e.type ?? "x", n = e.variant, s = e.feel, o = Ne(t, n, s);
|
|
525
|
+
return He({ type: t, feel: o });
|
|
574
526
|
}
|
|
575
|
-
const
|
|
527
|
+
const ze = {
|
|
576
528
|
spring: { stiffness: 200, damping: 22 }
|
|
577
|
-
},
|
|
578
|
-
function
|
|
529
|
+
}, Ue = 10, Ve = "horizontal", Xe = "#000000";
|
|
530
|
+
function Ct(e, t, n, s, o, i) {
|
|
579
531
|
window.getComputedStyle(e).position === "static" && (e.style.position = "relative");
|
|
580
|
-
const
|
|
581
|
-
|
|
532
|
+
const l = document.createElement("div");
|
|
533
|
+
l.style.cssText = `
|
|
582
534
|
position: absolute;
|
|
583
535
|
top: 0;
|
|
584
536
|
left: 0;
|
|
@@ -588,29 +540,29 @@ function wt(e, t, n, s, o, i) {
|
|
|
588
540
|
z-index: 9999;
|
|
589
541
|
overflow: hidden;
|
|
590
542
|
`;
|
|
591
|
-
const
|
|
592
|
-
for (let
|
|
593
|
-
const
|
|
543
|
+
const c = [];
|
|
544
|
+
for (let a = 0; a < t; a++) {
|
|
545
|
+
const p = document.createElement("div");
|
|
594
546
|
if (n === "horizontal") {
|
|
595
|
-
const
|
|
596
|
-
|
|
547
|
+
const d = 100 / t;
|
|
548
|
+
p.style.cssText = `
|
|
597
549
|
position: absolute;
|
|
598
|
-
top: ${
|
|
550
|
+
top: ${d * a}%;
|
|
599
551
|
left: 0;
|
|
600
552
|
width: 100%;
|
|
601
|
-
height: calc(${
|
|
553
|
+
height: calc(${d}% + 1px);
|
|
602
554
|
background: ${s};
|
|
603
555
|
transform: scaleX(${o === "hidden" ? 0 : 1});
|
|
604
556
|
transform-origin: ${i} center;
|
|
605
557
|
will-change: transform;
|
|
606
558
|
`;
|
|
607
559
|
} else {
|
|
608
|
-
const
|
|
609
|
-
|
|
560
|
+
const d = 100 / t;
|
|
561
|
+
p.style.cssText = `
|
|
610
562
|
position: absolute;
|
|
611
563
|
top: 0;
|
|
612
|
-
left: ${
|
|
613
|
-
width: calc(${
|
|
564
|
+
left: ${d * a}%;
|
|
565
|
+
width: calc(${d}% + 1px);
|
|
614
566
|
height: 100%;
|
|
615
567
|
background: ${s};
|
|
616
568
|
transform: scaleY(${o === "hidden" ? 0 : 1});
|
|
@@ -618,27 +570,27 @@ function wt(e, t, n, s, o, i) {
|
|
|
618
570
|
will-change: transform;
|
|
619
571
|
`;
|
|
620
572
|
}
|
|
621
|
-
|
|
573
|
+
c.push(p), l.appendChild(p);
|
|
622
574
|
}
|
|
623
|
-
return e.appendChild(
|
|
575
|
+
return e.appendChild(l), { container: l, blinds: c };
|
|
624
576
|
}
|
|
625
|
-
const
|
|
626
|
-
const t = e.blindCount ??
|
|
577
|
+
const Be = (e = {}) => {
|
|
578
|
+
const t = e.blindCount ?? Ue, n = e.direction ?? Ve, s = e.blindColor ?? Xe, o = e.physics ?? ze;
|
|
627
579
|
return {
|
|
628
|
-
prepare: async ({ from: i, to:
|
|
629
|
-
const
|
|
630
|
-
|
|
631
|
-
const
|
|
632
|
-
|
|
580
|
+
prepare: async ({ from: i, to: r }) => {
|
|
581
|
+
const l = await i, c = await r;
|
|
582
|
+
l.style.zIndex = "1000";
|
|
583
|
+
const a = Ct(
|
|
584
|
+
l,
|
|
633
585
|
t,
|
|
634
586
|
n,
|
|
635
587
|
s,
|
|
636
588
|
"hidden",
|
|
637
589
|
"left"
|
|
638
590
|
);
|
|
639
|
-
|
|
640
|
-
const
|
|
641
|
-
|
|
591
|
+
c.style.position = "relative", c.style.zIndex = "0";
|
|
592
|
+
const p = Ct(
|
|
593
|
+
c,
|
|
642
594
|
t,
|
|
643
595
|
n,
|
|
644
596
|
s,
|
|
@@ -646,55 +598,56 @@ const Ae = (e = {}) => {
|
|
|
646
598
|
"right"
|
|
647
599
|
);
|
|
648
600
|
return {
|
|
649
|
-
fromEl:
|
|
650
|
-
fromBlinds:
|
|
651
|
-
fromContainer:
|
|
652
|
-
toBlinds:
|
|
653
|
-
toContainer:
|
|
601
|
+
fromEl: l,
|
|
602
|
+
fromBlinds: a.blinds,
|
|
603
|
+
fromContainer: a.container,
|
|
604
|
+
toBlinds: p.blinds,
|
|
605
|
+
toContainer: p.container
|
|
654
606
|
};
|
|
655
607
|
},
|
|
656
608
|
animation: ({
|
|
657
609
|
fromEl: i,
|
|
658
|
-
fromBlinds:
|
|
659
|
-
fromContainer:
|
|
660
|
-
toBlinds:
|
|
661
|
-
toContainer:
|
|
610
|
+
fromBlinds: r,
|
|
611
|
+
fromContainer: l,
|
|
612
|
+
toBlinds: c,
|
|
613
|
+
toContainer: a
|
|
662
614
|
}) => {
|
|
663
|
-
const
|
|
664
|
-
(
|
|
665
|
-
element:
|
|
666
|
-
integrator:
|
|
667
|
-
style: (
|
|
668
|
-
transform: n === "horizontal" ? `scaleX(${
|
|
615
|
+
const p = r.map(
|
|
616
|
+
(f) => new b({
|
|
617
|
+
element: f,
|
|
618
|
+
integrator: w.from(o),
|
|
619
|
+
style: (y) => ({
|
|
620
|
+
transform: n === "horizontal" ? `scaleX(${y})` : `scaleY(${y})`
|
|
669
621
|
})
|
|
670
622
|
})
|
|
671
|
-
),
|
|
672
|
-
(
|
|
673
|
-
element:
|
|
674
|
-
integrator:
|
|
675
|
-
style: (
|
|
623
|
+
), d = c.map(
|
|
624
|
+
(f, y) => new b({
|
|
625
|
+
element: f,
|
|
626
|
+
integrator: w.from(o),
|
|
627
|
+
style: (m, S) => ({
|
|
676
628
|
transform: n === "horizontal" ? `scaleX(${S})` : `scaleY(${S})`
|
|
677
629
|
}),
|
|
678
|
-
onComplete:
|
|
679
|
-
|
|
630
|
+
onComplete: y === c.length - 1 ? () => {
|
|
631
|
+
a.remove(), l.remove(), i.style.zIndex = "", i.style.position = "";
|
|
680
632
|
} : void 0
|
|
681
633
|
})
|
|
682
|
-
),
|
|
683
|
-
return new
|
|
634
|
+
), u = new P(p, { mode: "parallel" }), h = new P(d, { mode: "parallel" });
|
|
635
|
+
return new P([u, h], { mode: "sequence" });
|
|
684
636
|
}
|
|
685
637
|
};
|
|
686
638
|
};
|
|
687
|
-
function
|
|
688
|
-
const {
|
|
689
|
-
return
|
|
690
|
-
t,
|
|
691
|
-
() => Ae({ direction: n })
|
|
692
|
-
);
|
|
639
|
+
function eo(e = {}) {
|
|
640
|
+
const { type: t = "horizontal" } = e;
|
|
641
|
+
return Be({ direction: t });
|
|
693
642
|
}
|
|
694
|
-
const
|
|
695
|
-
spring: {
|
|
696
|
-
|
|
697
|
-
|
|
643
|
+
const We = {
|
|
644
|
+
spring: {
|
|
645
|
+
stiffness: 250,
|
|
646
|
+
damping: 23,
|
|
647
|
+
doubleSpring: 0.7
|
|
648
|
+
}
|
|
649
|
+
}, L = 0.5;
|
|
650
|
+
function Ze(e) {
|
|
698
651
|
const t = e === "enter" ? -100 : 100, n = e === "enter" ? 100 : -100;
|
|
699
652
|
return {
|
|
700
653
|
out: {
|
|
@@ -702,32 +655,39 @@ function Ye(e) {
|
|
|
702
655
|
startStyle: {},
|
|
703
656
|
animate: (s) => ({
|
|
704
657
|
transform: `translate3d(${t * s}%, 0, 0)`,
|
|
705
|
-
opacity: `${
|
|
658
|
+
opacity: `${L + (1 - L) * (1 - s)}`
|
|
706
659
|
})
|
|
707
660
|
},
|
|
708
661
|
in: {
|
|
709
662
|
willChange: "transform, opacity",
|
|
710
663
|
startStyle: {
|
|
711
664
|
transform: `translate3d(${n}%, 0, 0)`,
|
|
712
|
-
opacity: `${
|
|
665
|
+
opacity: `${L}`
|
|
713
666
|
},
|
|
714
667
|
animate: (s) => ({
|
|
715
668
|
transform: `translate3d(${n * (1 - s)}%, 0, 0)`,
|
|
716
|
-
opacity: `${
|
|
669
|
+
opacity: `${L + (1 - L) * s}`
|
|
717
670
|
})
|
|
718
671
|
}
|
|
719
672
|
};
|
|
720
673
|
}
|
|
721
|
-
function
|
|
674
|
+
function Ge() {
|
|
722
675
|
return {
|
|
723
|
-
physics:
|
|
724
|
-
build:
|
|
676
|
+
physics: We,
|
|
677
|
+
build: Ze
|
|
725
678
|
};
|
|
726
679
|
}
|
|
727
|
-
const
|
|
728
|
-
spring: {
|
|
680
|
+
const je = {
|
|
681
|
+
spring: {
|
|
682
|
+
stiffness: 270,
|
|
683
|
+
damping: 25,
|
|
684
|
+
doubleSpring: {
|
|
685
|
+
stiffness: 600,
|
|
686
|
+
damping: 50
|
|
687
|
+
}
|
|
688
|
+
}
|
|
729
689
|
};
|
|
730
|
-
function
|
|
690
|
+
function qe(e) {
|
|
731
691
|
const t = e === "enter" ? -20 : 100, n = e === "enter" ? 100 : -20;
|
|
732
692
|
return {
|
|
733
693
|
out: {
|
|
@@ -748,234 +708,233 @@ function Me(e) {
|
|
|
748
708
|
}
|
|
749
709
|
};
|
|
750
710
|
}
|
|
751
|
-
function
|
|
711
|
+
function Ke() {
|
|
752
712
|
return {
|
|
753
|
-
physics:
|
|
754
|
-
build:
|
|
713
|
+
physics: je,
|
|
714
|
+
build: qe
|
|
755
715
|
};
|
|
756
716
|
}
|
|
757
|
-
const
|
|
758
|
-
parallax:
|
|
759
|
-
crossfade:
|
|
760
|
-
},
|
|
761
|
-
function
|
|
717
|
+
const Je = {
|
|
718
|
+
parallax: Ke(),
|
|
719
|
+
crossfade: Ge()
|
|
720
|
+
}, R = "0", zt = "1", v = "2", Qe = "parallax";
|
|
721
|
+
function $t(e, t) {
|
|
762
722
|
e.style.willChange = t.willChange, e.style.backfaceVisibility = "hidden", e.style.contain = "layout paint";
|
|
763
723
|
for (const [n, s] of Object.entries(t.startStyle))
|
|
764
724
|
e.style[n] = s;
|
|
765
725
|
}
|
|
766
|
-
const
|
|
767
|
-
const t =
|
|
726
|
+
const tn = (e = {}) => {
|
|
727
|
+
const t = Je[e.type ?? Qe], n = t.physics;
|
|
768
728
|
return {
|
|
769
|
-
prepare: ({ from:
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
729
|
+
prepare: ({ from: s, to: o, context: i }) => {
|
|
730
|
+
const r = i.direction === "forward" ? "enter" : "exit", l = t.build(r), c = r === "enter" ? R : v, a = r === "enter" ? v : R;
|
|
731
|
+
return s.then((p) => {
|
|
732
|
+
$t(p, l.out), p.style.pointerEvents = "none", p.style.zIndex = c;
|
|
733
|
+
}), o.then((p) => {
|
|
734
|
+
$t(p, l.in), p.style.position = "relative", p.style.zIndex = a;
|
|
735
|
+
}), {};
|
|
736
|
+
},
|
|
737
|
+
animation: ({ from: s, to: o, context: i }) => {
|
|
738
|
+
const r = i.direction === "forward" ? "enter" : "exit", l = t.build(r), c = r === "enter" ? v : R, a = new b({
|
|
739
|
+
element: s,
|
|
740
|
+
integrator: w.from(n),
|
|
741
|
+
style: (d) => l.out.animate(d),
|
|
779
742
|
// The outgoing node is the real, reused element (re-hidden on navigate),
|
|
780
743
|
// so clear every inline style we set on it — mirroring the `to` cleanup,
|
|
781
744
|
// plus the out-only `pointerEvents` / `zIndex`.
|
|
782
745
|
onComplete: () => {
|
|
783
|
-
|
|
746
|
+
s.style.willChange = "auto", s.style.backfaceVisibility = "", s.style.contain = "", s.style.transform = "", s.style.opacity = "", s.style.pointerEvents = "", s.style.zIndex = "";
|
|
784
747
|
}
|
|
785
|
-
}),
|
|
786
|
-
element:
|
|
787
|
-
integrator:
|
|
788
|
-
style: (
|
|
748
|
+
}), p = new b({
|
|
749
|
+
element: o,
|
|
750
|
+
integrator: w.from(n),
|
|
751
|
+
style: (d) => l.in.animate(d),
|
|
789
752
|
onComplete: () => {
|
|
790
|
-
|
|
753
|
+
o.style.willChange = "auto", o.style.backfaceVisibility = "", o.style.contain = "", o.style.transform = "", o.style.opacity = "", o.style.position === "relative" && (o.style.position = ""), o.style.zIndex === c && (o.style.zIndex = "");
|
|
791
754
|
}
|
|
792
755
|
});
|
|
793
|
-
for (const
|
|
794
|
-
const
|
|
795
|
-
|
|
796
|
-
|
|
756
|
+
for (const d of [a, p]) {
|
|
757
|
+
const u = d.onComplete;
|
|
758
|
+
d.onComplete = () => {
|
|
759
|
+
u == null || u(), d.releaseFill();
|
|
797
760
|
};
|
|
798
761
|
}
|
|
799
|
-
return new
|
|
762
|
+
return new P([a, p], { mode: "parallel" });
|
|
800
763
|
}
|
|
801
764
|
};
|
|
802
765
|
};
|
|
803
|
-
function
|
|
766
|
+
function en(e) {
|
|
804
767
|
return e === "slide" || e === "crossfade" ? "crossfade" : "parallax";
|
|
805
768
|
}
|
|
806
|
-
function
|
|
807
|
-
const
|
|
808
|
-
return
|
|
809
|
-
{ enter: t, exit: n },
|
|
810
|
-
(i) => Ne({ direction: i, type: o })
|
|
811
|
-
);
|
|
769
|
+
function no(e = {}) {
|
|
770
|
+
const t = e.type, n = en(t);
|
|
771
|
+
return tn({ type: n });
|
|
812
772
|
}
|
|
813
|
-
const
|
|
773
|
+
const nn = {
|
|
814
774
|
spring: { stiffness: 180, damping: 20, doubleSpring: !0 }
|
|
815
|
-
},
|
|
775
|
+
}, sn = {
|
|
816
776
|
spring: { stiffness: 170, damping: 20, doubleSpring: !0 }
|
|
817
|
-
},
|
|
818
|
-
const t = e.physics ??
|
|
777
|
+
}, on = (e = {}) => {
|
|
778
|
+
const t = e.physics ?? sn, n = e.physics ?? nn;
|
|
819
779
|
return {
|
|
820
780
|
prepare: ({ to: s }) => (s.then((o) => {
|
|
821
781
|
o.style.opacity = "0", o.style.willChange = "opacity";
|
|
822
782
|
}), {}),
|
|
823
783
|
animation: ({ from: s, to: o }) => {
|
|
824
|
-
const i = new
|
|
784
|
+
const i = new b({
|
|
825
785
|
element: s,
|
|
826
|
-
integrator:
|
|
786
|
+
integrator: w.from(n),
|
|
827
787
|
// Default bounds (0, 1). `u` runs 1→0 as the animation moves
|
|
828
788
|
// forward, mapping opacity from fully visible to invisible.
|
|
829
|
-
style: (
|
|
789
|
+
style: (l, c) => ({ opacity: c }),
|
|
830
790
|
onComplete: () => {
|
|
831
791
|
s.style.willChange = "auto", s.style.opacity = "";
|
|
832
792
|
}
|
|
833
|
-
}),
|
|
793
|
+
}), r = new b({
|
|
834
794
|
element: o,
|
|
835
|
-
integrator:
|
|
836
|
-
style: (
|
|
795
|
+
integrator: w.from(t),
|
|
796
|
+
style: (l) => ({ opacity: l }),
|
|
837
797
|
onComplete: () => {
|
|
838
798
|
o.style.willChange = "auto", o.style.opacity = "";
|
|
839
799
|
}
|
|
840
800
|
});
|
|
841
|
-
return new
|
|
801
|
+
return new P([i, r], { mode: "sequence" });
|
|
842
802
|
}
|
|
843
803
|
};
|
|
844
804
|
};
|
|
845
|
-
function
|
|
846
|
-
|
|
847
|
-
return v(t, () => Ze());
|
|
805
|
+
function so(e = {}) {
|
|
806
|
+
return on();
|
|
848
807
|
}
|
|
849
|
-
const
|
|
808
|
+
const q = {
|
|
850
809
|
scaleDown: { stiffness: 20, damping: 7 },
|
|
851
810
|
translate: { stiffness: 15, damping: 7 },
|
|
852
811
|
scaleUp: { stiffness: 20, damping: 7 }
|
|
853
|
-
},
|
|
812
|
+
}, T = {
|
|
854
813
|
scaleDown: 0,
|
|
855
814
|
translate: 0.2,
|
|
856
815
|
scaleUp: 0.8
|
|
857
|
-
},
|
|
858
|
-
function
|
|
859
|
-
const { items: t, from: n, to: s, recordFrame: o } = e, i =
|
|
860
|
-
item:
|
|
861
|
-
integrator: new
|
|
862
|
-
stiffness:
|
|
863
|
-
damping:
|
|
816
|
+
}, rn = 0.8, an = "white", Et = 1e3 / 60, ln = 600;
|
|
817
|
+
function cn(e) {
|
|
818
|
+
const { items: t, from: n, to: s, recordFrame: o } = e, i = Et / 1e3, r = Math.abs(s - n), l = t.map((a) => ({
|
|
819
|
+
item: a,
|
|
820
|
+
integrator: new X({
|
|
821
|
+
stiffness: a.spring.stiffness,
|
|
822
|
+
damping: a.spring.damping
|
|
864
823
|
}),
|
|
865
824
|
state: { position: n, velocity: 0 },
|
|
866
825
|
started: !1,
|
|
867
826
|
settled: !1,
|
|
868
827
|
settleTime: 0
|
|
869
828
|
}));
|
|
870
|
-
for (let
|
|
871
|
-
(
|
|
829
|
+
for (let a = 0; a < l.length; a++)
|
|
830
|
+
(a === 0 || l[a].item.offset === 0) && (l[a].started = !0);
|
|
872
831
|
o(0);
|
|
873
|
-
let
|
|
874
|
-
for (let
|
|
875
|
-
const
|
|
876
|
-
|
|
877
|
-
for (const
|
|
878
|
-
!
|
|
879
|
-
for (let
|
|
880
|
-
const
|
|
881
|
-
if (
|
|
882
|
-
const
|
|
883
|
-
if (!
|
|
884
|
-
(
|
|
832
|
+
let c = 0;
|
|
833
|
+
for (let a = 1; a <= ln; a++) {
|
|
834
|
+
const p = a * Et;
|
|
835
|
+
c = p;
|
|
836
|
+
for (const d of l)
|
|
837
|
+
!d.started || d.settled || (d.state = d.integrator.step(d.state, s, i), d.integrator.isSettled(d.state, s) ? (d.settleTime += i, d.settleTime >= ie && (d.state = { position: s, velocity: 0 }, d.settled = !0)) : d.settleTime = 0, d.item.tick(d.state.position));
|
|
838
|
+
for (let d = 1; d < l.length; d++) {
|
|
839
|
+
const u = l[d];
|
|
840
|
+
if (u.started) continue;
|
|
841
|
+
const h = l[d - 1];
|
|
842
|
+
if (!h.started) continue;
|
|
843
|
+
(r === 0 ? 1 : Math.abs(h.state.position - n) / r) >= u.item.offset && (u.started = !0);
|
|
885
844
|
}
|
|
886
|
-
if (o(
|
|
845
|
+
if (o(p), l.every((d) => d.settled)) return p;
|
|
887
846
|
}
|
|
888
|
-
return
|
|
847
|
+
return c;
|
|
889
848
|
}
|
|
890
|
-
function
|
|
849
|
+
function K(e, t) {
|
|
891
850
|
return e != null && e.spring ? {
|
|
892
851
|
stiffness: e.spring.stiffness,
|
|
893
852
|
damping: e.spring.damping
|
|
894
853
|
} : t;
|
|
895
854
|
}
|
|
896
|
-
function
|
|
897
|
-
const { rect: t, scale: n, direction: s, override: o } = e, i = s === "out" ? { scale: 1, translateY: -t.top } : { scale: n, translateY: -t.top + t.height },
|
|
855
|
+
function Pt(e) {
|
|
856
|
+
const { rect: t, scale: n, direction: s, override: o } = e, i = s === "out" ? { scale: 1, translateY: -t.top } : { scale: n, translateY: -t.top + t.height }, r = K(o, q.scaleDown), l = K(o, q.translate), c = K(o, q.scaleUp), a = s === "out" ? 1 : 0, p = s === "out" ? 0 : 1, d = s === "out" ? [
|
|
898
857
|
{
|
|
899
|
-
spring:
|
|
900
|
-
offset:
|
|
901
|
-
tick: (
|
|
902
|
-
const
|
|
903
|
-
i.scale = 1 - (1 - n) *
|
|
858
|
+
spring: r,
|
|
859
|
+
offset: T.scaleDown,
|
|
860
|
+
tick: (f) => {
|
|
861
|
+
const y = 1 - f;
|
|
862
|
+
i.scale = 1 - (1 - n) * y;
|
|
904
863
|
}
|
|
905
864
|
},
|
|
906
865
|
{
|
|
907
|
-
spring:
|
|
908
|
-
offset:
|
|
909
|
-
tick: (
|
|
910
|
-
const
|
|
911
|
-
i.translateY = -t.top - t.height *
|
|
866
|
+
spring: l,
|
|
867
|
+
offset: T.translate,
|
|
868
|
+
tick: (f) => {
|
|
869
|
+
const y = 1 - f;
|
|
870
|
+
i.translateY = -t.top - t.height * y;
|
|
912
871
|
}
|
|
913
872
|
},
|
|
914
873
|
{
|
|
915
|
-
spring:
|
|
916
|
-
offset:
|
|
917
|
-
tick: (
|
|
918
|
-
const
|
|
919
|
-
i.scale = n + (1 - n) *
|
|
874
|
+
spring: c,
|
|
875
|
+
offset: T.scaleUp,
|
|
876
|
+
tick: (f) => {
|
|
877
|
+
const y = 1 - f;
|
|
878
|
+
i.scale = n + (1 - n) * y;
|
|
920
879
|
}
|
|
921
880
|
}
|
|
922
881
|
] : [
|
|
923
882
|
{
|
|
924
|
-
spring:
|
|
925
|
-
offset:
|
|
926
|
-
tick: (
|
|
927
|
-
i.scale = 1 - (1 - n) *
|
|
883
|
+
spring: r,
|
|
884
|
+
offset: T.scaleDown,
|
|
885
|
+
tick: (f) => {
|
|
886
|
+
i.scale = 1 - (1 - n) * f;
|
|
928
887
|
}
|
|
929
888
|
},
|
|
930
889
|
{
|
|
931
|
-
spring:
|
|
932
|
-
offset:
|
|
933
|
-
tick: (
|
|
934
|
-
i.translateY = -t.top + t.height * (1 -
|
|
890
|
+
spring: l,
|
|
891
|
+
offset: T.translate,
|
|
892
|
+
tick: (f) => {
|
|
893
|
+
i.translateY = -t.top + t.height * (1 - f);
|
|
935
894
|
}
|
|
936
895
|
},
|
|
937
896
|
{
|
|
938
|
-
spring:
|
|
939
|
-
offset:
|
|
940
|
-
tick: (
|
|
941
|
-
i.scale = n + (1 - n) *
|
|
897
|
+
spring: c,
|
|
898
|
+
offset: T.scaleUp,
|
|
899
|
+
tick: (f) => {
|
|
900
|
+
i.scale = n + (1 - n) * f;
|
|
942
901
|
}
|
|
943
902
|
}
|
|
944
|
-
],
|
|
945
|
-
items:
|
|
946
|
-
from:
|
|
947
|
-
to:
|
|
948
|
-
recordFrame: (
|
|
949
|
-
time:
|
|
903
|
+
], u = [], h = cn({
|
|
904
|
+
items: d,
|
|
905
|
+
from: a,
|
|
906
|
+
to: p,
|
|
907
|
+
recordFrame: (f) => u.push({
|
|
908
|
+
time: f,
|
|
950
909
|
scale: i.scale,
|
|
951
910
|
translateY: i.translateY
|
|
952
911
|
})
|
|
953
912
|
});
|
|
954
|
-
return { snapshots:
|
|
913
|
+
return { snapshots: u, totalDuration: h };
|
|
955
914
|
}
|
|
956
|
-
function
|
|
915
|
+
function pn(e, t) {
|
|
957
916
|
if (e.length === 0) return { time: 0, scale: 1, translateY: 0 };
|
|
958
917
|
if (e.length === 1 || t <= 0) return e[0];
|
|
959
918
|
if (t >= 1) return e[e.length - 1];
|
|
960
919
|
const n = t * (e.length - 1), s = Math.floor(n), o = Math.ceil(n);
|
|
961
920
|
if (s === o) return e[s];
|
|
962
|
-
const i = e[s],
|
|
921
|
+
const i = e[s], r = e[o], l = n - s;
|
|
963
922
|
return {
|
|
964
|
-
time: i.time + (
|
|
965
|
-
scale: i.scale + (
|
|
966
|
-
translateY: i.translateY + (
|
|
923
|
+
time: i.time + (r.time - i.time) * l,
|
|
924
|
+
scale: i.scale + (r.scale - i.scale) * l,
|
|
925
|
+
translateY: i.translateY + (r.translateY - i.translateY) * l
|
|
967
926
|
};
|
|
968
927
|
}
|
|
969
|
-
const
|
|
928
|
+
const dn = [
|
|
970
929
|
[1, 1],
|
|
971
930
|
[-1, 1],
|
|
972
931
|
[1, -1],
|
|
973
932
|
[-1, -1]
|
|
974
933
|
];
|
|
975
|
-
function
|
|
976
|
-
const o = (i,
|
|
977
|
-
const
|
|
978
|
-
Object.assign(
|
|
934
|
+
function un(e, t) {
|
|
935
|
+
const o = (i, r, l) => {
|
|
936
|
+
const c = document.createElement("div");
|
|
937
|
+
Object.assign(c.style, {
|
|
979
938
|
position: "fixed",
|
|
980
939
|
pointerEvents: "none",
|
|
981
940
|
zIndex: "9999",
|
|
@@ -983,24 +942,24 @@ function Qe(e, t) {
|
|
|
983
942
|
height: "15px",
|
|
984
943
|
...i
|
|
985
944
|
});
|
|
986
|
-
const
|
|
987
|
-
Object.assign(
|
|
945
|
+
const a = document.createElement("div");
|
|
946
|
+
Object.assign(a.style, {
|
|
988
947
|
position: "absolute",
|
|
989
948
|
width: "15px",
|
|
990
949
|
height: "1px",
|
|
991
950
|
backgroundColor: e,
|
|
992
|
-
[
|
|
993
|
-
[
|
|
951
|
+
[l]: "0",
|
|
952
|
+
[r]: "0"
|
|
994
953
|
});
|
|
995
|
-
const
|
|
996
|
-
return Object.assign(
|
|
954
|
+
const p = document.createElement("div");
|
|
955
|
+
return Object.assign(p.style, {
|
|
997
956
|
position: "absolute",
|
|
998
957
|
width: "1px",
|
|
999
958
|
height: "15px",
|
|
1000
959
|
backgroundColor: e,
|
|
1001
|
-
[
|
|
1002
|
-
[
|
|
1003
|
-
}),
|
|
960
|
+
[l]: "0",
|
|
961
|
+
[r]: "0"
|
|
962
|
+
}), c.appendChild(a), c.appendChild(p), c;
|
|
1004
963
|
};
|
|
1005
964
|
return {
|
|
1006
965
|
topLeft: o(
|
|
@@ -1037,11 +996,11 @@ function Qe(e, t) {
|
|
|
1037
996
|
)
|
|
1038
997
|
};
|
|
1039
998
|
}
|
|
1040
|
-
function
|
|
999
|
+
function _t(e, t) {
|
|
1041
1000
|
const n = t.left + t.width / 2, s = t.top + t.height / 2;
|
|
1042
1001
|
e.style.transformOrigin = `${n}px ${s}px`;
|
|
1043
1002
|
}
|
|
1044
|
-
function
|
|
1003
|
+
function At(e, t) {
|
|
1045
1004
|
e.style.clipPath = `polygon(
|
|
1046
1005
|
${t.left}px ${t.top}px,
|
|
1047
1006
|
${t.left + t.width}px ${t.top}px,
|
|
@@ -1049,173 +1008,213 @@ function xt(e, t) {
|
|
|
1049
1008
|
${t.left}px ${t.top + t.height}px
|
|
1050
1009
|
)`;
|
|
1051
1010
|
}
|
|
1052
|
-
function
|
|
1011
|
+
function J(e, t, n, s, o) {
|
|
1053
1012
|
const i = n / 1e3;
|
|
1054
|
-
return new
|
|
1013
|
+
return new b({
|
|
1055
1014
|
element: e,
|
|
1056
|
-
integrator: new
|
|
1015
|
+
integrator: new de({ durationSec: i }),
|
|
1057
1016
|
lowerBound: 0,
|
|
1058
1017
|
upperBound: 1,
|
|
1059
|
-
style: (
|
|
1018
|
+
style: (r) => s(pn(t, r)),
|
|
1060
1019
|
onComplete: o
|
|
1061
1020
|
});
|
|
1062
1021
|
}
|
|
1063
|
-
const
|
|
1022
|
+
const fn = (e = {}) => {
|
|
1064
1023
|
var o;
|
|
1065
|
-
const t = ((o = e.border) == null ? void 0 : o.color) ??
|
|
1024
|
+
const t = ((o = e.border) == null ? void 0 : o.color) ?? an, n = rn, s = e.physics;
|
|
1066
1025
|
return {
|
|
1067
|
-
prepare: ({ from: i, to:
|
|
1068
|
-
const
|
|
1069
|
-
...
|
|
1070
|
-
top:
|
|
1026
|
+
prepare: ({ from: i, to: r, context: l }) => {
|
|
1027
|
+
const c = F(l, "from"), a = F(l, "to"), p = k(document.body, l.positionedParent), d = un(t, {
|
|
1028
|
+
...c,
|
|
1029
|
+
top: p.top
|
|
1071
1030
|
});
|
|
1072
|
-
for (const
|
|
1031
|
+
for (const u of [
|
|
1073
1032
|
"topLeft",
|
|
1074
1033
|
"topRight",
|
|
1075
1034
|
"bottomLeft",
|
|
1076
1035
|
"bottomRight"
|
|
1077
1036
|
])
|
|
1078
|
-
|
|
1079
|
-
return i.then((
|
|
1080
|
-
|
|
1081
|
-
}),
|
|
1082
|
-
|
|
1083
|
-
}), { borders:
|
|
1037
|
+
l.positionedParent.appendChild(d[u]);
|
|
1038
|
+
return i.then((u) => {
|
|
1039
|
+
_t(u, c), At(u, c), u.style.transform = `translateY(${-c.top}px)`;
|
|
1040
|
+
}), r.then((u) => {
|
|
1041
|
+
_t(u, a), At(u, a), u.style.transform = `translateY(${-a.top + a.height}px) scale(${n})`;
|
|
1042
|
+
}), { borders: d, fromRect: c, toRect: a };
|
|
1084
1043
|
},
|
|
1085
|
-
animation: ({ from: i, to:
|
|
1086
|
-
const
|
|
1087
|
-
rect:
|
|
1044
|
+
animation: ({ from: i, to: r, context: l, borders: c, fromRect: a, toRect: p }) => {
|
|
1045
|
+
const d = Pt({
|
|
1046
|
+
rect: a,
|
|
1088
1047
|
scale: n,
|
|
1089
1048
|
direction: "out",
|
|
1090
1049
|
override: s
|
|
1091
|
-
}),
|
|
1092
|
-
rect:
|
|
1050
|
+
}), u = Pt({
|
|
1051
|
+
rect: p,
|
|
1093
1052
|
scale: n,
|
|
1094
1053
|
direction: "in",
|
|
1095
1054
|
override: s
|
|
1096
|
-
}),
|
|
1055
|
+
}), h = J(
|
|
1097
1056
|
i,
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
(
|
|
1101
|
-
transform: `translateY(${
|
|
1057
|
+
d.snapshots,
|
|
1058
|
+
d.totalDuration,
|
|
1059
|
+
(g) => ({
|
|
1060
|
+
transform: `translateY(${g.translateY}px) scale(${g.scale})`
|
|
1102
1061
|
}),
|
|
1103
1062
|
() => {
|
|
1104
1063
|
i.style.clipPath = "", i.style.transformOrigin = "", i.style.transform = "";
|
|
1105
1064
|
}
|
|
1106
|
-
),
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
(
|
|
1111
|
-
transform: `translateY(${
|
|
1065
|
+
), f = J(
|
|
1066
|
+
r,
|
|
1067
|
+
u.snapshots,
|
|
1068
|
+
u.totalDuration,
|
|
1069
|
+
(g) => ({
|
|
1070
|
+
transform: `translateY(${g.translateY}px) scale(${g.scale})`
|
|
1112
1071
|
}),
|
|
1113
1072
|
() => {
|
|
1114
|
-
|
|
1073
|
+
r.style.clipPath = "", r.style.transformOrigin = "", r.style.transform = "";
|
|
1115
1074
|
}
|
|
1116
|
-
),
|
|
1117
|
-
const C = ["topLeft", "topRight", "bottomLeft", "bottomRight"][
|
|
1118
|
-
return
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1075
|
+
), y = dn.map(([g, $], x) => {
|
|
1076
|
+
const C = ["topLeft", "topRight", "bottomLeft", "bottomRight"][x];
|
|
1077
|
+
return J(
|
|
1078
|
+
c[C],
|
|
1079
|
+
d.snapshots,
|
|
1080
|
+
d.totalDuration,
|
|
1122
1081
|
(I) => {
|
|
1123
|
-
const
|
|
1124
|
-
return { transform: `translate(${
|
|
1082
|
+
const A = (a.width - a.width * I.scale) / 2 * 0.7 * g, _ = (a.height - a.height * I.scale) / 2 * 0.7 * $;
|
|
1083
|
+
return { transform: `translate(${A}px, ${_}px)` };
|
|
1125
1084
|
}
|
|
1126
1085
|
);
|
|
1127
|
-
}),
|
|
1086
|
+
}), m = new P([h, f, ...y], {
|
|
1128
1087
|
mode: "parallel"
|
|
1129
|
-
}), S =
|
|
1130
|
-
return
|
|
1088
|
+
}), S = m.onComplete;
|
|
1089
|
+
return m.onComplete = () => {
|
|
1131
1090
|
S == null || S();
|
|
1132
|
-
const
|
|
1133
|
-
for (const
|
|
1091
|
+
const g = l.positionedParent;
|
|
1092
|
+
for (const $ of [
|
|
1134
1093
|
"topLeft",
|
|
1135
1094
|
"topRight",
|
|
1136
1095
|
"bottomLeft",
|
|
1137
1096
|
"bottomRight"
|
|
1138
1097
|
]) {
|
|
1139
|
-
const
|
|
1140
|
-
|
|
1098
|
+
const x = c[$];
|
|
1099
|
+
x.parentElement === g && g.removeChild(x);
|
|
1141
1100
|
}
|
|
1142
|
-
},
|
|
1101
|
+
}, m;
|
|
1143
1102
|
}
|
|
1144
1103
|
};
|
|
1145
1104
|
};
|
|
1146
|
-
function
|
|
1147
|
-
const {
|
|
1148
|
-
return
|
|
1105
|
+
function oo(e = {}) {
|
|
1106
|
+
const { options: t } = e, n = (t == null ? void 0 : t.borderColor) !== void 0 ? { border: { color: t.borderColor } } : void 0;
|
|
1107
|
+
return fn(n);
|
|
1149
1108
|
}
|
|
1150
|
-
|
|
1151
|
-
class en {
|
|
1152
|
-
constructor() {
|
|
1153
|
-
x(this, "previousFromOpacity", "");
|
|
1154
|
-
}
|
|
1155
|
-
prepare(t) {
|
|
1156
|
-
t.from.then((n) => {
|
|
1157
|
-
this.previousFromOpacity = n.style.opacity, n.style.opacity = "0";
|
|
1158
|
-
});
|
|
1159
|
-
}
|
|
1160
|
-
contribute(t) {
|
|
1161
|
-
return t.onComplete(() => {
|
|
1162
|
-
t.from.style.opacity = this.previousFromOpacity;
|
|
1163
|
-
}), [];
|
|
1164
|
-
}
|
|
1165
|
-
}
|
|
1166
|
-
const nn = () => new en();
|
|
1167
|
-
class sn {
|
|
1168
|
-
contribute(t) {
|
|
1169
|
-
const { from: n, to: s, physics: o, onComplete: i } = t, l = n.style.opacity, a = s.style.opacity, r = n.style.willChange, c = s.style.willChange;
|
|
1170
|
-
return s.style.opacity = "0", n.style.willChange = "opacity", s.style.willChange = "opacity", i(() => {
|
|
1171
|
-
n.style.opacity = l, s.style.opacity = a, n.style.willChange = r, s.style.willChange = c;
|
|
1172
|
-
}), [
|
|
1173
|
-
new m({
|
|
1174
|
-
element: n,
|
|
1175
|
-
integrator: g.from(o),
|
|
1176
|
-
style: (f, p) => ({ opacity: p })
|
|
1177
|
-
}),
|
|
1178
|
-
new m({
|
|
1179
|
-
element: s,
|
|
1180
|
-
integrator: g.from(o),
|
|
1181
|
-
style: (f) => ({ opacity: f })
|
|
1182
|
-
})
|
|
1183
|
-
];
|
|
1184
|
-
}
|
|
1185
|
-
}
|
|
1186
|
-
const on = () => new sn(), rn = {
|
|
1187
|
-
static: nn,
|
|
1188
|
-
fade: on
|
|
1189
|
-
}, an = {
|
|
1190
|
-
spring: { stiffness: 320, damping: 30 }
|
|
1191
|
-
}, ln = () => an, cn = {
|
|
1192
|
-
spring: { stiffness: 300, damping: 30, doubleSpring: 1 }
|
|
1193
|
-
}, pn = () => cn, fn = {
|
|
1194
|
-
default: ln,
|
|
1195
|
-
smooth: pn
|
|
1196
|
-
}, dn = 700, yn = "data-hero-aspect-ratio", hn = "data-hero-radius";
|
|
1197
|
-
function un(e) {
|
|
1109
|
+
function hn(e) {
|
|
1198
1110
|
if (!e) return null;
|
|
1199
1111
|
if (e.includes("/")) {
|
|
1200
|
-
const
|
|
1201
|
-
|
|
1112
|
+
const n = e.split("/");
|
|
1113
|
+
if (n.length !== 2) return null;
|
|
1114
|
+
const s = Number.parseFloat(n[0] ?? ""), o = Number.parseFloat(n[1] ?? "");
|
|
1115
|
+
return Number.isFinite(s) && Number.isFinite(o) && s > 0 && o > 0 ? s / o : null;
|
|
1202
1116
|
}
|
|
1203
|
-
const t = parseFloat(e);
|
|
1117
|
+
const t = Number.parseFloat(e);
|
|
1204
1118
|
return Number.isFinite(t) && t > 0 ? t : null;
|
|
1205
1119
|
}
|
|
1206
|
-
function
|
|
1207
|
-
|
|
1208
|
-
if (!t) return 0;
|
|
1209
|
-
const n = parseFloat(t);
|
|
1210
|
-
return Number.isFinite(n) && n > 0 ? n : 0;
|
|
1120
|
+
function yn(e) {
|
|
1121
|
+
return e === "contain" || e === "cover" ? e : null;
|
|
1211
1122
|
}
|
|
1212
|
-
function
|
|
1123
|
+
function it(e) {
|
|
1124
|
+
return e.tagName === "IMG";
|
|
1125
|
+
}
|
|
1126
|
+
function mn(e) {
|
|
1127
|
+
if (it(e)) return e;
|
|
1128
|
+
if (e.tagName === "PICTURE" || e.tagName === "VIDEO")
|
|
1129
|
+
return null;
|
|
1130
|
+
const t = [];
|
|
1131
|
+
for (const n of Array.from(e.children)) {
|
|
1132
|
+
const s = n;
|
|
1133
|
+
it(s) && t.push(s);
|
|
1134
|
+
}
|
|
1135
|
+
return t.length === 1 ? t[0] ?? null : null;
|
|
1136
|
+
}
|
|
1137
|
+
function gn(e) {
|
|
1138
|
+
var c, a;
|
|
1139
|
+
if (!it(e)) return null;
|
|
1140
|
+
const t = e, n = t.naturalWidth, s = t.naturalHeight;
|
|
1141
|
+
if (typeof n == "number" && typeof s == "number" && Number.isFinite(n) && Number.isFinite(s) && n > 0 && s > 0)
|
|
1142
|
+
return n / s;
|
|
1143
|
+
const o = ((c = e.getAttribute("width")) == null ? void 0 : c.trim()) ?? "", i = ((a = e.getAttribute("height")) == null ? void 0 : a.trim()) ?? "", r = o === "" ? Number.NaN : Number(o), l = i === "" ? Number.NaN : Number(i);
|
|
1144
|
+
return Number.isFinite(r) && Number.isFinite(l) && r > 0 && l > 0 ? r / l : null;
|
|
1145
|
+
}
|
|
1146
|
+
function bn(e) {
|
|
1147
|
+
const t = e.trim().toLowerCase().replace(/\s+/g, " ");
|
|
1148
|
+
return t === "" || t === "center" || t === "center center" || t === "50% 50%";
|
|
1149
|
+
}
|
|
1150
|
+
function B(e) {
|
|
1151
|
+
if (typeof getComputedStyle == "function")
|
|
1152
|
+
try {
|
|
1153
|
+
return getComputedStyle(e);
|
|
1154
|
+
} catch {
|
|
1155
|
+
}
|
|
1156
|
+
return e.style;
|
|
1157
|
+
}
|
|
1158
|
+
function wn(e) {
|
|
1159
|
+
const t = B(e), n = bn(t.objectPosition ?? "");
|
|
1160
|
+
return {
|
|
1161
|
+
fit: n ? yn(t.objectFit ?? null) : null,
|
|
1162
|
+
centered: n
|
|
1163
|
+
};
|
|
1164
|
+
}
|
|
1165
|
+
function Ut(e) {
|
|
1166
|
+
if (!e) return 0;
|
|
1167
|
+
const t = /^(-?(?:\d+\.?\d*|\.\d+))px$/.exec(e.trim());
|
|
1168
|
+
if (!t) return null;
|
|
1169
|
+
const n = Number.parseFloat(t[1] ?? "");
|
|
1170
|
+
return Number.isFinite(n) && n >= 0 ? n : null;
|
|
1171
|
+
}
|
|
1172
|
+
function It(e) {
|
|
1173
|
+
const t = B(e), n = [
|
|
1174
|
+
t.borderTopLeftRadius,
|
|
1175
|
+
t.borderTopRightRadius,
|
|
1176
|
+
t.borderBottomRightRadius,
|
|
1177
|
+
t.borderBottomLeftRadius
|
|
1178
|
+
].map(Ut), s = n[0];
|
|
1179
|
+
if (s == null)
|
|
1180
|
+
return { radius: 0, supported: !1 };
|
|
1181
|
+
const o = n.every(
|
|
1182
|
+
(i) => i !== null && Math.abs(i - s) < 1e-3
|
|
1183
|
+
);
|
|
1184
|
+
return { radius: o ? s : 0, supported: o };
|
|
1185
|
+
}
|
|
1186
|
+
function Sn(e, t) {
|
|
1187
|
+
var o;
|
|
1188
|
+
if (!t) return null;
|
|
1189
|
+
const n = (o = e.getAttribute(t)) == null ? void 0 : o.trim();
|
|
1190
|
+
if (n == null || n === "") return null;
|
|
1191
|
+
const s = Number.parseFloat(n);
|
|
1192
|
+
return Number.isFinite(s) && s >= 0 ? s : null;
|
|
1193
|
+
}
|
|
1194
|
+
function xn(e) {
|
|
1195
|
+
const t = B(e);
|
|
1196
|
+
return [
|
|
1197
|
+
t.paddingTop,
|
|
1198
|
+
t.paddingRight,
|
|
1199
|
+
t.paddingBottom,
|
|
1200
|
+
t.paddingLeft,
|
|
1201
|
+
t.borderTopWidth,
|
|
1202
|
+
t.borderRightWidth,
|
|
1203
|
+
t.borderBottomWidth,
|
|
1204
|
+
t.borderLeftWidth
|
|
1205
|
+
].every((s) => s ? Ut(s) === 0 : !0);
|
|
1206
|
+
}
|
|
1207
|
+
function Cn(e) {
|
|
1208
|
+
const t = B(e), n = (s) => s === "hidden" || s === "clip";
|
|
1209
|
+
return n(t.overflowX) && n(t.overflowY);
|
|
1210
|
+
}
|
|
1211
|
+
function O(e) {
|
|
1213
1212
|
return e.left + e.width / 2;
|
|
1214
1213
|
}
|
|
1215
|
-
function
|
|
1214
|
+
function D(e) {
|
|
1216
1215
|
return e.top + e.height / 2;
|
|
1217
1216
|
}
|
|
1218
|
-
function
|
|
1217
|
+
function pt(e, t) {
|
|
1219
1218
|
return {
|
|
1220
1219
|
top: Math.max(0, t.top - e.top),
|
|
1221
1220
|
right: Math.max(0, e.left + e.width - (t.left + t.width)),
|
|
@@ -1223,7 +1222,14 @@ function mn(e, t) {
|
|
|
1223
1222
|
left: Math.max(0, t.left - e.left)
|
|
1224
1223
|
};
|
|
1225
1224
|
}
|
|
1226
|
-
function
|
|
1225
|
+
function $n(e, t) {
|
|
1226
|
+
const n = Math.max(e.left, t.left), s = Math.max(e.top, t.top), o = Math.min(e.left + e.width, t.left + t.width), i = Math.min(e.top + e.height, t.top + t.height);
|
|
1227
|
+
return o > n && i > s ? { left: n, top: s, width: o - n, height: i - s } : null;
|
|
1228
|
+
}
|
|
1229
|
+
function Rt(e, t) {
|
|
1230
|
+
return Math.abs(e.left - t.left) < 0.01 && Math.abs(e.top - t.top) < 0.01 && Math.abs(e.width - t.width) < 0.01 && Math.abs(e.height - t.height) < 0.01;
|
|
1231
|
+
}
|
|
1232
|
+
function En(e, t, n) {
|
|
1227
1233
|
const s = e.width / e.height;
|
|
1228
1234
|
let o, i;
|
|
1229
1235
|
return n === "contain" ? s > t ? (i = e.height, o = i * t) : (o = e.width, i = o / t) : s > t ? (o = e.width, i = o / t) : (i = e.height, o = i * t), {
|
|
@@ -1233,33 +1239,145 @@ function gn(e, t, n) {
|
|
|
1233
1239
|
height: i
|
|
1234
1240
|
};
|
|
1235
1241
|
}
|
|
1236
|
-
function
|
|
1237
|
-
const s =
|
|
1238
|
-
if (o === null)
|
|
1239
|
-
return {
|
|
1240
|
-
bbox: s,
|
|
1241
|
-
content: s,
|
|
1242
|
-
window: s,
|
|
1243
|
-
clipInset: { top: 0, right: 0, bottom: 0, left: 0 }
|
|
1244
|
-
};
|
|
1245
|
-
const i = gn(s, o, n), l = n === "cover" ? s : i;
|
|
1242
|
+
function Vt(e, t, n) {
|
|
1243
|
+
const s = t !== null && n !== null && e.width > 0 && e.height > 0 ? En(e, t, n) : e, o = n === "contain" ? s : e;
|
|
1246
1244
|
return {
|
|
1247
|
-
bbox:
|
|
1248
|
-
content:
|
|
1249
|
-
window:
|
|
1250
|
-
clipInset:
|
|
1245
|
+
bbox: e,
|
|
1246
|
+
content: s,
|
|
1247
|
+
window: o,
|
|
1248
|
+
clipInset: pt(s, o),
|
|
1249
|
+
aspectRatio: t,
|
|
1250
|
+
fit: n,
|
|
1251
|
+
radius: 0,
|
|
1252
|
+
radiusSource: "none",
|
|
1253
|
+
bboxRadius: 0,
|
|
1254
|
+
bboxRadiusSource: "none",
|
|
1255
|
+
contentAware: t !== null && n !== null,
|
|
1256
|
+
mediaElement: null
|
|
1257
|
+
};
|
|
1258
|
+
}
|
|
1259
|
+
function rt(e, t, n) {
|
|
1260
|
+
return {
|
|
1261
|
+
...Vt(e, null, null),
|
|
1262
|
+
radius: t,
|
|
1263
|
+
radiusSource: n,
|
|
1264
|
+
bboxRadius: t,
|
|
1265
|
+
bboxRadiusSource: n
|
|
1266
|
+
};
|
|
1267
|
+
}
|
|
1268
|
+
function Xt(e, t) {
|
|
1269
|
+
const n = e.aspectRatio, s = t.aspectRatio;
|
|
1270
|
+
return e.contentAware && t.contentAware && n !== null && s !== null && Math.abs(n - s) / Math.max(n, s) < 0.01;
|
|
1271
|
+
}
|
|
1272
|
+
function vt(e) {
|
|
1273
|
+
return rt(
|
|
1274
|
+
e.bbox,
|
|
1275
|
+
e.bboxRadius,
|
|
1276
|
+
e.bboxRadiusSource
|
|
1277
|
+
);
|
|
1278
|
+
}
|
|
1279
|
+
function Bt(e, t) {
|
|
1280
|
+
return Xt(e, t) ? [e, t] : [vt(e), vt(t)];
|
|
1281
|
+
}
|
|
1282
|
+
function at(e, t, n, s) {
|
|
1283
|
+
const o = mn(e), i = o ? n(o) : t, r = s.legacyAspectRatioAttribute ? hn(
|
|
1284
|
+
e.getAttribute(s.legacyAspectRatioAttribute) ?? (o == null ? void 0 : o.getAttribute(s.legacyAspectRatioAttribute)) ?? null
|
|
1285
|
+
) : null, l = r ?? (o ? gn(o) : null), c = o ? wn(o) : { fit: null, centered: !0 }, a = c.centered && (o === null || xn(o)) ? c.fit ?? (r !== null ? s.fallbackFit ?? null : null) : null, p = Vt(i, l, a), d = Cn(e), h = o !== null && o !== e && d ? $n(p.window, t) : p.window, f = Sn(e, s.legacyRadiusAttribute), y = o === e || d, m = y ? It(e) : { radius: 0, supported: !0 }, S = f ?? m.radius, g = f !== null ? "legacy" : m.supported ? m.radius > 0 ? "computed" : "none" : "unsupported", $ = [];
|
|
1286
|
+
h && y && Rt(h, t) && $.push(m), h && o && Rt(h, i) && $.push(It(o));
|
|
1287
|
+
const x = $.every((_) => _.supported), C = Math.max(
|
|
1288
|
+
0,
|
|
1289
|
+
...$.map((_) => _.radius)
|
|
1290
|
+
), I = f ?? C, A = f !== null ? "legacy" : x ? C > 0 ? "computed" : "none" : "unsupported";
|
|
1291
|
+
return !h || A === "unsupported" ? rt(t, S, g) : {
|
|
1292
|
+
...p,
|
|
1293
|
+
bbox: t,
|
|
1294
|
+
window: h,
|
|
1295
|
+
clipInset: pt(p.content, h),
|
|
1296
|
+
radius: I,
|
|
1297
|
+
radiusSource: A,
|
|
1298
|
+
bboxRadius: S,
|
|
1299
|
+
bboxRadiusSource: g,
|
|
1300
|
+
mediaElement: p.contentAware ? o : null
|
|
1251
1301
|
};
|
|
1252
1302
|
}
|
|
1253
|
-
function
|
|
1254
|
-
const
|
|
1303
|
+
function Wt(e, t, n, s, o) {
|
|
1304
|
+
const i = n.width / s, r = n.height / o;
|
|
1255
1305
|
return {
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1306
|
+
left: O(e) + (O(n) - O(t)) / s - i / 2,
|
|
1307
|
+
top: D(e) + (D(n) - D(t)) / o - r / 2,
|
|
1308
|
+
width: i,
|
|
1309
|
+
height: r
|
|
1260
1310
|
};
|
|
1261
1311
|
}
|
|
1262
|
-
|
|
1312
|
+
const Pn = {
|
|
1313
|
+
enter: "contain",
|
|
1314
|
+
exit: "cover",
|
|
1315
|
+
legacy: "contain"
|
|
1316
|
+
};
|
|
1317
|
+
function M(e) {
|
|
1318
|
+
return Pn[e];
|
|
1319
|
+
}
|
|
1320
|
+
const Ot = "data-hero-enter-key", Dt = "data-hero-exit-key", Q = "data-hero-key";
|
|
1321
|
+
class _n {
|
|
1322
|
+
constructor() {
|
|
1323
|
+
E(this, "previousFromOpacity", "");
|
|
1324
|
+
}
|
|
1325
|
+
prepare(t) {
|
|
1326
|
+
t.from.then((n) => {
|
|
1327
|
+
this.previousFromOpacity = n.style.opacity, n.style.opacity = "0";
|
|
1328
|
+
});
|
|
1329
|
+
}
|
|
1330
|
+
contribute(t) {
|
|
1331
|
+
return t.onComplete(() => {
|
|
1332
|
+
t.from.style.opacity = this.previousFromOpacity;
|
|
1333
|
+
}), [];
|
|
1334
|
+
}
|
|
1335
|
+
}
|
|
1336
|
+
const An = () => new _n();
|
|
1337
|
+
class In {
|
|
1338
|
+
contribute(t) {
|
|
1339
|
+
const { from: n, to: s, physics: o, onComplete: i } = t, r = n.style.opacity, l = s.style.opacity, c = n.style.willChange, a = s.style.willChange;
|
|
1340
|
+
return s.style.opacity = "0", n.style.willChange = "opacity", s.style.willChange = "opacity", i(() => {
|
|
1341
|
+
n.style.opacity = r, s.style.opacity = l, n.style.willChange = c, s.style.willChange = a;
|
|
1342
|
+
}), [
|
|
1343
|
+
new b({
|
|
1344
|
+
element: n,
|
|
1345
|
+
integrator: w.from(o),
|
|
1346
|
+
style: (p, d) => ({ opacity: d })
|
|
1347
|
+
}),
|
|
1348
|
+
new b({
|
|
1349
|
+
element: s,
|
|
1350
|
+
integrator: w.from(o),
|
|
1351
|
+
style: (p) => ({ opacity: p })
|
|
1352
|
+
})
|
|
1353
|
+
];
|
|
1354
|
+
}
|
|
1355
|
+
}
|
|
1356
|
+
const Rn = () => new In(), vn = {
|
|
1357
|
+
static: An,
|
|
1358
|
+
fade: Rn
|
|
1359
|
+
}, On = {
|
|
1360
|
+
spring: { stiffness: 320, damping: 30 }
|
|
1361
|
+
}, Dn = () => On, Fn = {
|
|
1362
|
+
spring: { stiffness: 300, damping: 30, doubleSpring: 1 }
|
|
1363
|
+
}, Tn = () => Fn, Mn = {
|
|
1364
|
+
default: Dn,
|
|
1365
|
+
smooth: Tn
|
|
1366
|
+
}, Yn = 700, Ln = "data-hero-aspect-ratio", kn = "data-hero-radius";
|
|
1367
|
+
function Ft(e, t, n) {
|
|
1368
|
+
const s = k(e, t);
|
|
1369
|
+
return at(
|
|
1370
|
+
t,
|
|
1371
|
+
s,
|
|
1372
|
+
(o) => k(e, o),
|
|
1373
|
+
{
|
|
1374
|
+
fallbackFit: n,
|
|
1375
|
+
legacyAspectRatioAttribute: Ln,
|
|
1376
|
+
legacyRadiusAttribute: kn
|
|
1377
|
+
}
|
|
1378
|
+
);
|
|
1379
|
+
}
|
|
1380
|
+
function U(e, t) {
|
|
1263
1381
|
const n = /* @__PURE__ */ new Map(), s = e.querySelectorAll(`[${t}]`);
|
|
1264
1382
|
for (const o of Array.from(s)) {
|
|
1265
1383
|
const i = o.getAttribute(t);
|
|
@@ -1267,185 +1385,191 @@ function H(e, t) {
|
|
|
1267
1385
|
}
|
|
1268
1386
|
return n;
|
|
1269
1387
|
}
|
|
1270
|
-
function
|
|
1271
|
-
const n = [], s =
|
|
1272
|
-
for (const [
|
|
1273
|
-
const
|
|
1274
|
-
|
|
1275
|
-
key:
|
|
1276
|
-
fromEl:
|
|
1277
|
-
toEl:
|
|
1278
|
-
fromFit: "
|
|
1279
|
-
toFit: "
|
|
1388
|
+
function Hn(e, t) {
|
|
1389
|
+
const n = [], s = U(t, Ot), o = U(e, Dt);
|
|
1390
|
+
for (const [l, c] of s) {
|
|
1391
|
+
const a = o.get(l);
|
|
1392
|
+
a && n.push({
|
|
1393
|
+
key: l,
|
|
1394
|
+
fromEl: a,
|
|
1395
|
+
toEl: c,
|
|
1396
|
+
fromFit: M("exit"),
|
|
1397
|
+
toFit: M("enter")
|
|
1280
1398
|
});
|
|
1281
1399
|
}
|
|
1282
|
-
const i =
|
|
1283
|
-
for (const [
|
|
1284
|
-
const
|
|
1285
|
-
|
|
1286
|
-
key:
|
|
1287
|
-
fromEl:
|
|
1288
|
-
toEl:
|
|
1289
|
-
fromFit: "
|
|
1290
|
-
toFit: "
|
|
1400
|
+
const i = U(e, Ot), r = U(t, Dt);
|
|
1401
|
+
for (const [l, c] of i) {
|
|
1402
|
+
const a = r.get(l);
|
|
1403
|
+
a && n.push({
|
|
1404
|
+
key: l,
|
|
1405
|
+
fromEl: c,
|
|
1406
|
+
toEl: a,
|
|
1407
|
+
fromFit: M("enter"),
|
|
1408
|
+
toFit: M("exit")
|
|
1291
1409
|
});
|
|
1292
1410
|
}
|
|
1293
1411
|
return n;
|
|
1294
1412
|
}
|
|
1295
|
-
function
|
|
1413
|
+
function Nn(e, t) {
|
|
1296
1414
|
const n = [], s = Array.from(
|
|
1297
|
-
t.querySelectorAll(`[${
|
|
1415
|
+
t.querySelectorAll(`[${Q}]`)
|
|
1298
1416
|
);
|
|
1299
1417
|
for (const o of s) {
|
|
1300
|
-
const i = o.getAttribute(
|
|
1418
|
+
const i = o.getAttribute(Q);
|
|
1301
1419
|
if (!i) continue;
|
|
1302
|
-
const
|
|
1303
|
-
`[${
|
|
1420
|
+
const r = e.querySelector(
|
|
1421
|
+
`[${Q}="${i}"]`
|
|
1304
1422
|
);
|
|
1305
|
-
|
|
1423
|
+
r && n.push({
|
|
1306
1424
|
key: i,
|
|
1307
|
-
fromEl:
|
|
1425
|
+
fromEl: r,
|
|
1308
1426
|
toEl: o,
|
|
1309
|
-
fromFit: "
|
|
1310
|
-
toFit: "
|
|
1427
|
+
fromFit: M("legacy"),
|
|
1428
|
+
toFit: M("legacy")
|
|
1311
1429
|
});
|
|
1312
1430
|
}
|
|
1313
1431
|
return n;
|
|
1314
1432
|
}
|
|
1315
|
-
function
|
|
1316
|
-
const n =
|
|
1317
|
-
return n.length > 0 ? n :
|
|
1433
|
+
function zn(e, t) {
|
|
1434
|
+
const n = Hn(e, t);
|
|
1435
|
+
return n.length > 0 ? n : Nn(e, t);
|
|
1436
|
+
}
|
|
1437
|
+
function Un(e, t) {
|
|
1438
|
+
return Bt(e, t);
|
|
1318
1439
|
}
|
|
1319
|
-
function
|
|
1320
|
-
|
|
1321
|
-
|
|
1440
|
+
function Vn(e, t) {
|
|
1441
|
+
return e.radiusSource === "unsupported" || t.radiusSource === "unsupported" ? !1 : e.mediaElement !== null || t.mediaElement !== null || e.radiusSource === "computed" || e.radiusSource === "legacy" || t.radiusSource === "computed" || t.radiusSource === "legacy";
|
|
1442
|
+
}
|
|
1443
|
+
function Xn(e, t, n) {
|
|
1444
|
+
const { fromEl: s, toEl: o } = t, [i, r] = Un(
|
|
1445
|
+
Ft(e, s, t.fromFit),
|
|
1446
|
+
Ft(e, o, t.toFit)
|
|
1447
|
+
), l = i.content, c = i.window, a = r.content, p = r.window, d = r.clipInset, u = i.radiusSource === "unsupported" || r.radiusSource === "unsupported", h = u ? 0 : i.radius, f = u ? 0 : r.radius;
|
|
1448
|
+
if (l.width === 0 || l.height === 0 || c.width === 0 || c.height === 0 || a.width === 0 || a.height === 0 || p.width === 0 || p.height === 0)
|
|
1322
1449
|
return null;
|
|
1323
1450
|
const y = Math.max(
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
),
|
|
1327
|
-
if (Math.abs(
|
|
1328
|
-
const
|
|
1329
|
-
c,
|
|
1451
|
+
l.width / a.width,
|
|
1452
|
+
l.height / a.height
|
|
1453
|
+
), m = O(l), S = D(l), g = O(a), $ = D(a), x = m - g, C = S - $;
|
|
1454
|
+
if (Math.abs(C) > n) return null;
|
|
1455
|
+
const I = pt(
|
|
1330
1456
|
a,
|
|
1331
|
-
|
|
1332
|
-
y
|
|
1457
|
+
Wt(a, l, c, y, y)
|
|
1333
1458
|
);
|
|
1334
1459
|
return {
|
|
1335
|
-
toContent:
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1460
|
+
toContent: a,
|
|
1461
|
+
fromVisualEl: i.mediaElement ?? s,
|
|
1462
|
+
toVisualEl: r.mediaElement ?? o,
|
|
1463
|
+
resetCloneRadius: Vn(i, r),
|
|
1464
|
+
styleFor: (A, _) => {
|
|
1465
|
+
const H = _ * x, Y = _ * C, N = A + _ * y, Jt = Math.max(0, h * _ + f * A) / Math.max(Math.abs(N), 1e-6), Qt = I.top * _ + d.top * A, te = I.right * _ + d.right * A, ee = I.bottom * _ + d.bottom * A, ne = I.left * _ + d.left * A;
|
|
1339
1466
|
return {
|
|
1340
|
-
transform: `translate(${
|
|
1341
|
-
clipPath: `inset(${
|
|
1467
|
+
transform: `translate(${H}px, ${Y}px) scale(${N})`,
|
|
1468
|
+
clipPath: `inset(${Qt}px ${te}px ${ee}px ${ne}px round ${Jt}px)`
|
|
1342
1469
|
};
|
|
1343
1470
|
}
|
|
1344
1471
|
};
|
|
1345
1472
|
}
|
|
1346
|
-
function
|
|
1473
|
+
function Bn(e, t) {
|
|
1347
1474
|
e.style.transform = t.transform, e.style.clipPath = t.clipPath;
|
|
1348
1475
|
}
|
|
1349
|
-
class
|
|
1476
|
+
class Wn {
|
|
1350
1477
|
contribute(t) {
|
|
1351
|
-
const { resolved: n, physics: s, positionedParent: o, maxDistance: i, onComplete:
|
|
1352
|
-
for (const
|
|
1353
|
-
const
|
|
1354
|
-
if (!
|
|
1355
|
-
const d =
|
|
1356
|
-
|
|
1357
|
-
const
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
}),
|
|
1361
|
-
new
|
|
1362
|
-
element:
|
|
1363
|
-
integrator:
|
|
1364
|
-
style:
|
|
1478
|
+
const { resolved: n, physics: s, positionedParent: o, maxDistance: i, onComplete: r } = t, l = [];
|
|
1479
|
+
for (const c of n.pairs) {
|
|
1480
|
+
const a = Xn(o, c, i);
|
|
1481
|
+
if (!a) continue;
|
|
1482
|
+
const { fromVisualEl: p, toVisualEl: d } = a, u = d.cloneNode(!0);
|
|
1483
|
+
u.style.position = "absolute", u.style.left = `${a.toContent.left}px`, u.style.top = `${a.toContent.top}px`, u.style.width = `${a.toContent.width}px`, u.style.height = `${a.toContent.height}px`, u.style.margin = "0", u.style.transformOrigin = "center center", u.style.zIndex = "1000", u.style.willChange = "transform, clip-path", u.style.pointerEvents = "none", u.style.maxWidth = "none", u.style.maxHeight = "none", a.resetCloneRadius && (u.style.borderRadius = "0"), Bn(u, a.styleFor(0, 1)), o.appendChild(u);
|
|
1484
|
+
const h = p.style.opacity, f = d.style.opacity;
|
|
1485
|
+
p.style.opacity = "0", d.style.opacity = "0", r(() => {
|
|
1486
|
+
p.style.opacity = h, d.style.opacity = f, u.parentElement && u.parentElement.removeChild(u);
|
|
1487
|
+
}), l.push(
|
|
1488
|
+
new b({
|
|
1489
|
+
element: u,
|
|
1490
|
+
integrator: w.from(s),
|
|
1491
|
+
style: a.styleFor
|
|
1365
1492
|
})
|
|
1366
1493
|
);
|
|
1367
1494
|
}
|
|
1368
|
-
return
|
|
1495
|
+
return l;
|
|
1369
1496
|
}
|
|
1370
1497
|
}
|
|
1371
|
-
function
|
|
1372
|
-
return [new
|
|
1498
|
+
function Zn(e) {
|
|
1499
|
+
return [new Wn(), vn[e.type]()];
|
|
1373
1500
|
}
|
|
1374
|
-
const
|
|
1375
|
-
const t =
|
|
1501
|
+
const Gn = (e) => {
|
|
1502
|
+
const t = Zn(e), n = Mn[e.variant](), s = Yn;
|
|
1376
1503
|
return {
|
|
1377
1504
|
prepare: (o) => {
|
|
1378
|
-
var
|
|
1505
|
+
var l;
|
|
1379
1506
|
const i = Promise.all([
|
|
1380
1507
|
o.from,
|
|
1381
1508
|
o.to
|
|
1382
|
-
]).then(([
|
|
1509
|
+
]).then(([c, a]) => ({ pairs: zn(c, a) })), r = {
|
|
1383
1510
|
from: o.from,
|
|
1384
1511
|
to: o.to,
|
|
1385
1512
|
resolved: i
|
|
1386
1513
|
};
|
|
1387
|
-
for (const
|
|
1388
|
-
(
|
|
1389
|
-
return i.then((
|
|
1514
|
+
for (const c of t)
|
|
1515
|
+
(l = c.prepare) == null || l.call(c, r);
|
|
1516
|
+
return i.then((c) => ({ resolved: c }));
|
|
1390
1517
|
},
|
|
1391
|
-
animation: ({ from: o, to: i, context:
|
|
1392
|
-
if (
|
|
1393
|
-
return new
|
|
1394
|
-
const
|
|
1395
|
-
|
|
1396
|
-
},
|
|
1518
|
+
animation: ({ from: o, to: i, context: r, resolved: l }) => {
|
|
1519
|
+
if (l.pairs.length === 0)
|
|
1520
|
+
return new P([], { mode: "parallel" });
|
|
1521
|
+
const c = [], a = (f) => {
|
|
1522
|
+
c.push(f);
|
|
1523
|
+
}, p = {
|
|
1397
1524
|
from: o,
|
|
1398
1525
|
to: i,
|
|
1399
|
-
resolved:
|
|
1526
|
+
resolved: l,
|
|
1400
1527
|
physics: n,
|
|
1401
|
-
positionedParent:
|
|
1528
|
+
positionedParent: r.positionedParent,
|
|
1402
1529
|
maxDistance: s,
|
|
1403
|
-
onComplete:
|
|
1404
|
-
},
|
|
1405
|
-
for (const
|
|
1406
|
-
|
|
1407
|
-
if (
|
|
1408
|
-
return new
|
|
1409
|
-
const
|
|
1410
|
-
return
|
|
1411
|
-
|
|
1412
|
-
for (const
|
|
1530
|
+
onComplete: a
|
|
1531
|
+
}, d = [];
|
|
1532
|
+
for (const f of t)
|
|
1533
|
+
f.contribute && d.push(...f.contribute(p));
|
|
1534
|
+
if (d.length === 0)
|
|
1535
|
+
return new P([], { mode: "parallel" });
|
|
1536
|
+
const u = new P(d, { mode: "parallel" }), h = u.onComplete;
|
|
1537
|
+
return u.onComplete = () => {
|
|
1538
|
+
h == null || h();
|
|
1539
|
+
for (const f of c)
|
|
1413
1540
|
try {
|
|
1414
|
-
|
|
1415
|
-
} catch (
|
|
1416
|
-
console.error("[hero] cleanup error",
|
|
1541
|
+
f();
|
|
1542
|
+
} catch (y) {
|
|
1543
|
+
console.error("[hero] cleanup error", y);
|
|
1417
1544
|
}
|
|
1418
|
-
},
|
|
1545
|
+
}, u;
|
|
1419
1546
|
}
|
|
1420
1547
|
};
|
|
1421
1548
|
};
|
|
1422
|
-
function
|
|
1423
|
-
const
|
|
1424
|
-
return
|
|
1425
|
-
t,
|
|
1426
|
-
() => _n({ type: n, variant: s })
|
|
1427
|
-
);
|
|
1549
|
+
function io(e = {}) {
|
|
1550
|
+
const t = e.type ?? "static", n = e.variant ?? "default";
|
|
1551
|
+
return Gn({ type: t, variant: n });
|
|
1428
1552
|
}
|
|
1429
|
-
const
|
|
1553
|
+
const jn = {
|
|
1430
1554
|
spring: { stiffness: 50, damping: 30 }
|
|
1431
|
-
},
|
|
1555
|
+
}, qn = {
|
|
1432
1556
|
spring: { stiffness: 80, damping: 25 }
|
|
1433
|
-
},
|
|
1434
|
-
const t = e.physics ??
|
|
1557
|
+
}, Kn = (e = {}) => {
|
|
1558
|
+
const t = e.physics ?? jn, n = e.initialRotation ?? 45, s = e.initialScale ?? 0.01, o = e.rotationTriggerPoint ?? 0.8;
|
|
1435
1559
|
return {
|
|
1436
|
-
prepare: ({ from: i, to:
|
|
1437
|
-
|
|
1438
|
-
}),
|
|
1439
|
-
const
|
|
1440
|
-
|
|
1441
|
-
const
|
|
1442
|
-
|
|
1560
|
+
prepare: ({ from: i, to: r, context: l }) => (i.then((c) => {
|
|
1561
|
+
c.style.opacity = "1";
|
|
1562
|
+
}), r.then((c) => {
|
|
1563
|
+
const a = F(l, "to"), p = Math.min(a.width, a.height) * 0.4;
|
|
1564
|
+
c.style.setProperty("--max-border-radius", `${p}px`), c.style.setProperty("--border-radius-scale", "1"), c.style.willChange = "transform", c.style.backfaceVisibility = "hidden";
|
|
1565
|
+
const d = a.left + a.width / 2, u = a.top + a.height / 2;
|
|
1566
|
+
c.style.transformOrigin = `${d}px ${u}px`, c.style.position = "fixed", c.style.top = `${a.top}px`, c.style.left = `${a.left}px`, c.style.width = `${a.width}px`, c.style.height = `${a.height}px`, c.style.zIndex = "1000", c.style.overflow = "hidden", c.style.transform = `rotate(${n}deg) scale(${s}) translateZ(0)`, c.style.borderRadius = "calc(var(--max-border-radius) * var(--border-radius-scale))", c.style.opacity = "1";
|
|
1443
1567
|
}), {}),
|
|
1444
|
-
animation: ({ from: i, to:
|
|
1445
|
-
const
|
|
1568
|
+
animation: ({ from: i, to: r }) => {
|
|
1569
|
+
const l = new b({
|
|
1446
1570
|
element: i,
|
|
1447
|
-
integrator:
|
|
1448
|
-
style: (
|
|
1571
|
+
integrator: w.from(qn),
|
|
1572
|
+
style: (a, p) => ({ opacity: p }),
|
|
1449
1573
|
// The outgoing node is reused (re-hidden, shown again on the next
|
|
1450
1574
|
// navigation), so reset every inline style we wrote to it — mirroring
|
|
1451
1575
|
// the "to" cleanup below. prepare sets opacity and the out style fades
|
|
@@ -1453,56 +1577,55 @@ const In = {
|
|
|
1453
1577
|
onComplete: () => {
|
|
1454
1578
|
i.style.opacity = "";
|
|
1455
1579
|
}
|
|
1456
|
-
}),
|
|
1457
|
-
element:
|
|
1458
|
-
integrator:
|
|
1459
|
-
style: (
|
|
1460
|
-
let
|
|
1461
|
-
if (
|
|
1462
|
-
|
|
1463
|
-
else if (
|
|
1464
|
-
const
|
|
1465
|
-
|
|
1580
|
+
}), c = new b({
|
|
1581
|
+
element: r,
|
|
1582
|
+
integrator: w.from(t),
|
|
1583
|
+
style: (a) => {
|
|
1584
|
+
let p;
|
|
1585
|
+
if (a <= 0.05)
|
|
1586
|
+
p = s;
|
|
1587
|
+
else if (a <= o) {
|
|
1588
|
+
const f = (a - 0.05) / (o - 0.05), y = Math.pow(f, 9);
|
|
1589
|
+
p = s + (0.8 - s) * y;
|
|
1466
1590
|
} else {
|
|
1467
|
-
const
|
|
1468
|
-
|
|
1591
|
+
const f = (a - o) / (1 - o);
|
|
1592
|
+
p = 0.8 + 0.2 * (1 - Math.pow(1 - f, 3));
|
|
1469
1593
|
}
|
|
1470
|
-
const
|
|
1471
|
-
let
|
|
1472
|
-
if (
|
|
1473
|
-
|
|
1594
|
+
const d = 0.7;
|
|
1595
|
+
let u;
|
|
1596
|
+
if (a <= d)
|
|
1597
|
+
u = n;
|
|
1474
1598
|
else {
|
|
1475
|
-
const
|
|
1476
|
-
|
|
1599
|
+
const f = (a - d) / (1 - d), y = 1 - Math.pow(1 - f, 2);
|
|
1600
|
+
u = n * (1 - y);
|
|
1477
1601
|
}
|
|
1478
|
-
let
|
|
1479
|
-
if (
|
|
1480
|
-
|
|
1602
|
+
let h;
|
|
1603
|
+
if (a <= d)
|
|
1604
|
+
h = 1;
|
|
1481
1605
|
else {
|
|
1482
|
-
const
|
|
1483
|
-
|
|
1606
|
+
const f = (a - d) / (1 - d);
|
|
1607
|
+
h = 1 - Math.pow(f, 0.5);
|
|
1484
1608
|
}
|
|
1485
1609
|
return {
|
|
1486
|
-
transform: `rotate(${
|
|
1487
|
-
"--border-radius-scale":
|
|
1610
|
+
transform: `rotate(${u.toFixed(2)}deg) scale(${p.toFixed(4)}) translateZ(0)`,
|
|
1611
|
+
"--border-radius-scale": h.toFixed(4)
|
|
1488
1612
|
};
|
|
1489
1613
|
},
|
|
1490
1614
|
onComplete: () => {
|
|
1491
|
-
|
|
1615
|
+
r.style.willChange = "", r.style.backfaceVisibility = "", r.style.removeProperty("--max-border-radius"), r.style.removeProperty("--border-radius-scale"), r.style.transform = "", r.style.transformOrigin = "", r.style.position = "", r.style.zIndex = "", r.style.top = "", r.style.left = "", r.style.width = "", r.style.height = "", r.style.overflow = "", r.style.borderRadius = "";
|
|
1492
1616
|
}
|
|
1493
1617
|
});
|
|
1494
|
-
return new
|
|
1618
|
+
return new P([l, c], { mode: "parallel" });
|
|
1495
1619
|
}
|
|
1496
1620
|
};
|
|
1497
1621
|
};
|
|
1498
|
-
function
|
|
1499
|
-
|
|
1500
|
-
return v(t, () => Dn());
|
|
1622
|
+
function ro(e = {}) {
|
|
1623
|
+
return Kn();
|
|
1501
1624
|
}
|
|
1502
|
-
const
|
|
1625
|
+
const Jn = {
|
|
1503
1626
|
spring: { stiffness: 100, damping: 30 }
|
|
1504
|
-
},
|
|
1505
|
-
const t = e.physics ??
|
|
1627
|
+
}, Qn = (e = {}) => {
|
|
1628
|
+
const t = e.physics ?? Jn;
|
|
1506
1629
|
return {
|
|
1507
1630
|
prepare: ({ from: n, to: s }) => (n.then((o) => {
|
|
1508
1631
|
o.style.transformOrigin = "center center", o.style.willChange = "transform, opacity";
|
|
@@ -1510,12 +1633,12 @@ const On = {
|
|
|
1510
1633
|
o.style.opacity = "0", o.style.transform = "rotate(-180deg)", o.style.transformOrigin = "center center", o.style.willChange = "transform, opacity";
|
|
1511
1634
|
}), {}),
|
|
1512
1635
|
animation: ({ from: n, to: s }) => {
|
|
1513
|
-
const o = new
|
|
1636
|
+
const o = new b({
|
|
1514
1637
|
element: n,
|
|
1515
|
-
integrator:
|
|
1516
|
-
style: (
|
|
1517
|
-
transform: `rotate(${
|
|
1518
|
-
opacity:
|
|
1638
|
+
integrator: w.from(t),
|
|
1639
|
+
style: (r) => ({
|
|
1640
|
+
transform: `rotate(${r * 180}deg)`,
|
|
1641
|
+
opacity: r < 0.5 ? 1 : 0
|
|
1519
1642
|
}),
|
|
1520
1643
|
// The outgoing node is reused (re-hidden, shown again on the next
|
|
1521
1644
|
// navigation), so clear every inline style we wrote to `from`
|
|
@@ -1523,27 +1646,26 @@ const On = {
|
|
|
1523
1646
|
onComplete: () => {
|
|
1524
1647
|
n.style.willChange = "auto", n.style.transform = "", n.style.transformOrigin = "", n.style.opacity = "";
|
|
1525
1648
|
}
|
|
1526
|
-
}), i = new
|
|
1649
|
+
}), i = new b({
|
|
1527
1650
|
element: s,
|
|
1528
|
-
integrator:
|
|
1651
|
+
integrator: w.from(t),
|
|
1529
1652
|
// u runs 1→0, so -u*180 unwinds -180→0.
|
|
1530
|
-
style: (
|
|
1531
|
-
transform: `rotate(${-
|
|
1532
|
-
opacity:
|
|
1653
|
+
style: (r, l) => ({
|
|
1654
|
+
transform: `rotate(${-l * 180}deg)`,
|
|
1655
|
+
opacity: r > 0.5 ? 1 : 0
|
|
1533
1656
|
}),
|
|
1534
1657
|
onComplete: () => {
|
|
1535
1658
|
s.style.willChange = "auto", s.style.transform = "", s.style.transformOrigin = "", s.style.opacity = "";
|
|
1536
1659
|
}
|
|
1537
1660
|
});
|
|
1538
|
-
return new
|
|
1661
|
+
return new P([o, i], { mode: "parallel" });
|
|
1539
1662
|
}
|
|
1540
1663
|
};
|
|
1541
1664
|
};
|
|
1542
|
-
function
|
|
1543
|
-
|
|
1544
|
-
return v(t, () => Tn());
|
|
1665
|
+
function ao(e = {}) {
|
|
1666
|
+
return Qn();
|
|
1545
1667
|
}
|
|
1546
|
-
const
|
|
1668
|
+
const ts = {
|
|
1547
1669
|
spring: {
|
|
1548
1670
|
stiffness: 20,
|
|
1549
1671
|
damping: 8,
|
|
@@ -1551,100 +1673,96 @@ const Fn = {
|
|
|
1551
1673
|
restDelta: 1e-3,
|
|
1552
1674
|
restSpeed: 1e-3
|
|
1553
1675
|
}
|
|
1554
|
-
},
|
|
1555
|
-
const t = e.
|
|
1676
|
+
}, es = (e = {}) => {
|
|
1677
|
+
const t = e.physics ?? ts, n = e.directional ?? !0;
|
|
1556
1678
|
return {
|
|
1557
|
-
prepare: ({ from:
|
|
1558
|
-
r
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1679
|
+
prepare: ({ from: s, to: o, context: i }) => {
|
|
1680
|
+
const r = !n || i.direction === "forward", l = r ? R : v, c = r ? v : R;
|
|
1681
|
+
return s.then((a) => {
|
|
1682
|
+
a.style.zIndex = l, a.style.willChange = "transform", a.style.backfaceVisibility = "hidden", a.style.contain = "layout paint", a.style.pointerEvents = "none";
|
|
1683
|
+
}), o.then((a) => {
|
|
1684
|
+
a.style.willChange = "transform", a.style.backfaceVisibility = "hidden", a.style.contain = "layout paint", a.style.position = "relative", a.style.zIndex = c;
|
|
1685
|
+
}), {};
|
|
1686
|
+
},
|
|
1687
|
+
animation: ({ from: s, to: o, context: i }) => {
|
|
1688
|
+
const r = !n || i.direction === "forward", l = r ? v : R, c = s.offsetHeight, a = o.offsetHeight, p = window.innerHeight, d = Math.max(Math.min(c, a), p), u = new b({
|
|
1689
|
+
element: s,
|
|
1690
|
+
integrator: w.from(t),
|
|
1691
|
+
style: (f) => ({ transform: `translate3d(0, ${r ? -d * f : d * f}px, 0)` }),
|
|
1567
1692
|
// The outgoing node is the real, reused element (re-hidden then shown
|
|
1568
1693
|
// again on the next navigation), so mirror the incoming cleanup and
|
|
1569
1694
|
// also reset the out-only props applied in prepare (zIndex,
|
|
1570
1695
|
// pointerEvents) — otherwise the leftover inline styles corrupt the
|
|
1571
1696
|
// page the next time it appears.
|
|
1572
1697
|
onComplete: () => {
|
|
1573
|
-
|
|
1698
|
+
s.style.willChange = "auto", s.style.backfaceVisibility = "", s.style.contain = "", s.style.transform = "", s.style.pointerEvents = "", s.style.zIndex = "";
|
|
1574
1699
|
}
|
|
1575
|
-
}),
|
|
1576
|
-
element:
|
|
1577
|
-
integrator:
|
|
1578
|
-
style: (
|
|
1700
|
+
}), h = new b({
|
|
1701
|
+
element: o,
|
|
1702
|
+
integrator: w.from(t),
|
|
1703
|
+
style: (f, y) => ({ transform: `translate3d(0, ${r ? y * d : y * -d}px, 0)` }),
|
|
1579
1704
|
onComplete: () => {
|
|
1580
|
-
|
|
1705
|
+
o.style.willChange = "auto", o.style.backfaceVisibility = "", o.style.contain = "", o.style.transform = "", o.style.position === "relative" && (o.style.position = ""), o.style.zIndex === l && (o.style.zIndex = "");
|
|
1581
1706
|
}
|
|
1582
1707
|
});
|
|
1583
|
-
for (const
|
|
1584
|
-
const
|
|
1585
|
-
|
|
1586
|
-
|
|
1708
|
+
for (const f of [u, h]) {
|
|
1709
|
+
const y = f.onComplete;
|
|
1710
|
+
f.onComplete = () => {
|
|
1711
|
+
y == null || y(), f.releaseFill();
|
|
1587
1712
|
};
|
|
1588
1713
|
}
|
|
1589
|
-
return new
|
|
1714
|
+
return new P([u, h], { mode: "parallel" });
|
|
1590
1715
|
}
|
|
1591
1716
|
};
|
|
1592
1717
|
};
|
|
1593
|
-
function
|
|
1594
|
-
const {
|
|
1595
|
-
return
|
|
1596
|
-
t,
|
|
1597
|
-
() => vt({ direction: "up" })
|
|
1598
|
-
) : ot(
|
|
1599
|
-
t,
|
|
1600
|
-
{ forward: "up", backward: "down" },
|
|
1601
|
-
(s) => vt({ direction: s })
|
|
1602
|
-
);
|
|
1718
|
+
function lo(e = {}) {
|
|
1719
|
+
const { type: t = "directional" } = e;
|
|
1720
|
+
return es({ directional: t === "directional" });
|
|
1603
1721
|
}
|
|
1604
|
-
const
|
|
1722
|
+
const ns = {
|
|
1605
1723
|
spring: { stiffness: 200, damping: 24 }
|
|
1606
|
-
},
|
|
1724
|
+
}, ss = {
|
|
1607
1725
|
inertia: { acceleration: 25, resistance: 1.2 }
|
|
1608
|
-
},
|
|
1609
|
-
function
|
|
1726
|
+
}, tt = 0.2;
|
|
1727
|
+
function os() {
|
|
1610
1728
|
return {
|
|
1611
|
-
enterPhysics:
|
|
1612
|
-
exitPhysics:
|
|
1729
|
+
enterPhysics: ns,
|
|
1730
|
+
exitPhysics: ss,
|
|
1613
1731
|
background: {
|
|
1614
1732
|
willChange: "transform, opacity",
|
|
1615
1733
|
enterStyle: (e, t) => ({
|
|
1616
|
-
transform: `scale(${1 -
|
|
1734
|
+
transform: `scale(${1 - tt * e})`,
|
|
1617
1735
|
opacity: t
|
|
1618
1736
|
}),
|
|
1619
1737
|
exitStyle: (e) => ({
|
|
1620
|
-
transform: `scale(${1 -
|
|
1738
|
+
transform: `scale(${1 - tt + tt * e})`,
|
|
1621
1739
|
opacity: e
|
|
1622
1740
|
})
|
|
1623
1741
|
}
|
|
1624
1742
|
};
|
|
1625
1743
|
}
|
|
1626
|
-
const
|
|
1744
|
+
const is = {
|
|
1627
1745
|
spring: { stiffness: 200, damping: 24 }
|
|
1628
|
-
},
|
|
1746
|
+
}, rs = {
|
|
1629
1747
|
inertia: { acceleration: 25, resistance: 1.2 }
|
|
1630
|
-
},
|
|
1631
|
-
function
|
|
1748
|
+
}, et = 0.08, as = 16, nt = 0.6, ls = (e) => `blur(${Math.max(0, e).toFixed(2)}px)`;
|
|
1749
|
+
function cs() {
|
|
1632
1750
|
return {
|
|
1633
|
-
enterPhysics:
|
|
1634
|
-
exitPhysics:
|
|
1751
|
+
enterPhysics: is,
|
|
1752
|
+
exitPhysics: rs,
|
|
1635
1753
|
background: {
|
|
1636
1754
|
willChange: "transform, opacity",
|
|
1637
1755
|
// enter: t 0 → 1 as the sheet rises. At rest (t = 0) the page is
|
|
1638
1756
|
// untouched; at peak it is shrunk and dimmed.
|
|
1639
1757
|
enterStyle: (e) => ({
|
|
1640
|
-
transform: `scale(${1 -
|
|
1641
|
-
opacity: 1 - (1 -
|
|
1758
|
+
transform: `scale(${1 - et * e})`,
|
|
1759
|
+
opacity: 1 - (1 - nt) * e
|
|
1642
1760
|
}),
|
|
1643
1761
|
// exit: t 0 → 1 as the sheet falls away and the page returns to rest —
|
|
1644
1762
|
// the inverse ramp of enter.
|
|
1645
1763
|
exitStyle: (e) => ({
|
|
1646
|
-
transform: `scale(${1 -
|
|
1647
|
-
opacity:
|
|
1764
|
+
transform: `scale(${1 - et + et * e})`,
|
|
1765
|
+
opacity: nt + (1 - nt) * e
|
|
1648
1766
|
})
|
|
1649
1767
|
},
|
|
1650
1768
|
overlay: {
|
|
@@ -1662,21 +1780,27 @@ function Rn() {
|
|
|
1662
1780
|
// enter: 0 → MAX as the sheet rises (progress 0 → 1).
|
|
1663
1781
|
// exit: MAX → 0 as it falls (progress 0 → 1, so the visual is inverted).
|
|
1664
1782
|
style: (e, t) => {
|
|
1665
|
-
const n = e === "enter" ? t : 1 - t, s =
|
|
1783
|
+
const n = e === "enter" ? t : 1 - t, s = ls(as * n);
|
|
1666
1784
|
return { backdropFilter: s, WebkitBackdropFilter: s };
|
|
1667
1785
|
}
|
|
1668
1786
|
}
|
|
1669
1787
|
};
|
|
1670
1788
|
}
|
|
1671
|
-
const
|
|
1672
|
-
spring: {
|
|
1673
|
-
|
|
1674
|
-
|
|
1789
|
+
const ps = {
|
|
1790
|
+
spring: {
|
|
1791
|
+
stiffness: 230,
|
|
1792
|
+
damping: 25
|
|
1793
|
+
}
|
|
1794
|
+
}, ds = {
|
|
1795
|
+
spring: {
|
|
1796
|
+
stiffness: 230,
|
|
1797
|
+
damping: 25
|
|
1798
|
+
}
|
|
1675
1799
|
};
|
|
1676
|
-
function
|
|
1800
|
+
function us() {
|
|
1677
1801
|
return {
|
|
1678
|
-
enterPhysics:
|
|
1679
|
-
exitPhysics:
|
|
1802
|
+
enterPhysics: ps,
|
|
1803
|
+
exitPhysics: ds,
|
|
1680
1804
|
background: {
|
|
1681
1805
|
willChange: "",
|
|
1682
1806
|
enterStyle: () => ({}),
|
|
@@ -1684,161 +1808,156 @@ function Vn() {
|
|
|
1684
1808
|
}
|
|
1685
1809
|
};
|
|
1686
1810
|
}
|
|
1687
|
-
const
|
|
1688
|
-
static:
|
|
1689
|
-
"background-scale":
|
|
1690
|
-
blur:
|
|
1691
|
-
},
|
|
1692
|
-
const t =
|
|
1811
|
+
const fs = {
|
|
1812
|
+
static: us(),
|
|
1813
|
+
"background-scale": os(),
|
|
1814
|
+
blur: cs()
|
|
1815
|
+
}, hs = "static", ys = "transform", ms = (e = {}) => {
|
|
1816
|
+
const t = fs[e.type ?? hs], n = t.background, s = t.overlay, o = n.willChange !== "";
|
|
1693
1817
|
return {
|
|
1694
|
-
prepare: ({ from:
|
|
1695
|
-
const p =
|
|
1696
|
-
p.then((
|
|
1697
|
-
|
|
1698
|
-
}), d.then((
|
|
1699
|
-
|
|
1818
|
+
prepare: ({ from: i, to: r, context: l, createElement: c }) => {
|
|
1819
|
+
const a = l.direction === "forward" ? "enter" : "exit", p = a === "enter" ? r : i, d = a === "enter" ? i : r;
|
|
1820
|
+
p.then((h) => {
|
|
1821
|
+
h.style.willChange = ys, h.style.backfaceVisibility = "hidden", h.style.contain = "layout paint", h.style.zIndex = v, a === "enter" ? h.style.position = "relative" : h.style.pointerEvents = "none";
|
|
1822
|
+
}), d.then((h) => {
|
|
1823
|
+
o && (h.style.willChange = n.willChange, h.style.backfaceVisibility = "hidden", h.style.contain = "layout paint"), h.style.zIndex = R, a === "enter" ? h.style.pointerEvents = "none" : h.style.position = "relative";
|
|
1700
1824
|
});
|
|
1701
1825
|
let u;
|
|
1702
|
-
return
|
|
1826
|
+
return s && (u = c("sheet-overlay"), Object.assign(u.style, s.initialStyle), u.style.willChange = s.willChange, l.positionedParent.appendChild(u)), { overlay: u };
|
|
1703
1827
|
},
|
|
1704
|
-
animation: ({ from:
|
|
1705
|
-
const p =
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
),
|
|
1709
|
-
|
|
1710
|
-
},
|
|
1711
|
-
const
|
|
1712
|
-
r.style.position === "relative" && (r.style.position = ""), r.style.zIndex ===
|
|
1713
|
-
},
|
|
1714
|
-
const C =
|
|
1715
|
-
|
|
1716
|
-
C == null || C(),
|
|
1828
|
+
animation: ({ from: i, to: r, context: l, overlay: c }) => {
|
|
1829
|
+
const a = l.direction === "forward" ? "enter" : "exit", p = a === "enter" ? t.enterPhysics : t.exitPhysics, d = a === "enter" ? r : i, u = a === "enter" ? i : r, h = F(
|
|
1830
|
+
l,
|
|
1831
|
+
a === "enter" ? "to" : "from"
|
|
1832
|
+
), f = () => {
|
|
1833
|
+
i.style.pointerEvents = "", i.style.zIndex = "";
|
|
1834
|
+
}, y = () => {
|
|
1835
|
+
const x = a === "enter" ? v : R;
|
|
1836
|
+
r.style.position === "relative" && (r.style.position = ""), r.style.zIndex === x && (r.style.zIndex = "");
|
|
1837
|
+
}, m = (x) => {
|
|
1838
|
+
const C = x.onComplete;
|
|
1839
|
+
x.onComplete = () => {
|
|
1840
|
+
C == null || C(), x.releaseFill();
|
|
1717
1841
|
};
|
|
1718
1842
|
};
|
|
1719
|
-
|
|
1720
|
-
const S =
|
|
1721
|
-
transform: `translate3d(0, ${C *
|
|
1722
|
-
}) : (
|
|
1723
|
-
transform: `translate3d(0, ${
|
|
1724
|
-
}),
|
|
1725
|
-
element:
|
|
1726
|
-
integrator:
|
|
1843
|
+
d.style.clipPath = `inset(${h.top}px 0 calc(100% - ${h.top + h.height}px) 0)`;
|
|
1844
|
+
const S = a === "enter" ? (x, C) => ({
|
|
1845
|
+
transform: `translate3d(0, ${C * h.height}px, 0)`
|
|
1846
|
+
}) : (x) => ({
|
|
1847
|
+
transform: `translate3d(0, ${x * h.height}px, 0)`
|
|
1848
|
+
}), g = new b({
|
|
1849
|
+
element: d,
|
|
1850
|
+
integrator: w.from(p),
|
|
1727
1851
|
style: S,
|
|
1728
1852
|
onComplete: () => {
|
|
1729
|
-
|
|
1853
|
+
d.style.willChange = "auto", d.style.backfaceVisibility = "", d.style.contain = "", d.style.clipPath = "", d.style.transform = "", f(), y();
|
|
1730
1854
|
}
|
|
1731
1855
|
});
|
|
1732
|
-
|
|
1733
|
-
const
|
|
1734
|
-
if (
|
|
1735
|
-
const
|
|
1736
|
-
|
|
1737
|
-
const C =
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
), I = C.left + C.width / 2,
|
|
1741
|
-
|
|
1742
|
-
const
|
|
1743
|
-
element:
|
|
1744
|
-
integrator:
|
|
1745
|
-
style:
|
|
1856
|
+
m(g);
|
|
1857
|
+
const $ = [g];
|
|
1858
|
+
if (o) {
|
|
1859
|
+
const x = u.scrollHeight;
|
|
1860
|
+
x > 0 && (u.style.height = `${x}px`);
|
|
1861
|
+
const C = F(
|
|
1862
|
+
l,
|
|
1863
|
+
a === "enter" ? "from" : "to"
|
|
1864
|
+
), I = C.left + C.width / 2, A = C.top + C.height / 2;
|
|
1865
|
+
u.style.clipPath = `inset(${C.top}px 0 calc(100% - ${C.top + C.height}px) 0)`, u.style.transformOrigin = `${I}px ${A}px`;
|
|
1866
|
+
const _ = a === "enter" ? (Y, N) => n.enterStyle(Y, N) : (Y) => n.exitStyle(Y), H = new b({
|
|
1867
|
+
element: u,
|
|
1868
|
+
integrator: w.from(p),
|
|
1869
|
+
style: _,
|
|
1746
1870
|
// The background is the reused outgoing (`from`) node on `enter` and
|
|
1747
1871
|
// the surviving incoming (`to`) node on `exit` — in both cases its
|
|
1748
1872
|
// inline styles must be cleared on settle so the reused node is not
|
|
1749
1873
|
// left scaled/faded/clipped the next time it is shown. releaseFill
|
|
1750
1874
|
// below drops the WAAPI fill so these resets actually take effect.
|
|
1751
1875
|
onComplete: () => {
|
|
1752
|
-
|
|
1876
|
+
u.style.willChange = "auto", u.style.backfaceVisibility = "", u.style.contain = "", u.style.clipPath = "", u.style.transformOrigin = "", u.style.transform = "", u.style.opacity = "", u.style.height = "";
|
|
1753
1877
|
}
|
|
1754
1878
|
});
|
|
1755
|
-
|
|
1879
|
+
m(H), $.push(H);
|
|
1756
1880
|
}
|
|
1757
|
-
if (
|
|
1758
|
-
|
|
1759
|
-
const
|
|
1760
|
-
|
|
1761
|
-
new
|
|
1762
|
-
element:
|
|
1763
|
-
integrator:
|
|
1764
|
-
style: (C) =>
|
|
1881
|
+
if (c && s) {
|
|
1882
|
+
c.style.zIndex = zt;
|
|
1883
|
+
const x = Ht(l, "to");
|
|
1884
|
+
c.style.top = `${x.top}px`, c.style.height = `${x.height}px`, $.push(
|
|
1885
|
+
new b({
|
|
1886
|
+
element: c,
|
|
1887
|
+
integrator: w.from(p),
|
|
1888
|
+
style: (C) => s.style(a, C)
|
|
1765
1889
|
})
|
|
1766
1890
|
);
|
|
1767
1891
|
}
|
|
1768
|
-
return new
|
|
1892
|
+
return new P($, { mode: "parallel" });
|
|
1769
1893
|
}
|
|
1770
1894
|
};
|
|
1771
1895
|
};
|
|
1772
|
-
function
|
|
1896
|
+
function gs(e) {
|
|
1773
1897
|
return e === "scale" || e === "background-scale" ? "background-scale" : e === "blur" ? "blur" : "static";
|
|
1774
1898
|
}
|
|
1775
|
-
function
|
|
1776
|
-
const
|
|
1777
|
-
return
|
|
1778
|
-
{ enter: t, exit: n },
|
|
1779
|
-
(i) => Wn({ direction: i, type: o })
|
|
1780
|
-
);
|
|
1899
|
+
function co(e = {}) {
|
|
1900
|
+
const t = e.type, n = gs(t);
|
|
1901
|
+
return ms({ type: n });
|
|
1781
1902
|
}
|
|
1782
|
-
const
|
|
1903
|
+
const bs = {
|
|
1783
1904
|
spring: { stiffness: 170, damping: 22, doubleSpring: 0.8 }
|
|
1784
|
-
},
|
|
1785
|
-
const t = e.
|
|
1905
|
+
}, ws = (e = {}) => {
|
|
1906
|
+
const t = e.physics ?? bs;
|
|
1786
1907
|
return {
|
|
1787
|
-
prepare: ({ from:
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1908
|
+
prepare: ({ from: n, to: s, context: o }) => {
|
|
1909
|
+
const i = o.direction === "forward";
|
|
1910
|
+
return n.then((r) => {
|
|
1911
|
+
r.style.willChange = "transform", r.style.backfaceVisibility = "hidden", r.style.contain = "layout paint", r.style.pointerEvents = "none";
|
|
1912
|
+
}), s.then((r) => {
|
|
1913
|
+
const l = i ? 100 : -100;
|
|
1914
|
+
r.style.transform = `translate3d(${l}%, 0, 0)`, r.style.willChange = "transform", r.style.backfaceVisibility = "hidden", r.style.contain = "layout paint";
|
|
1915
|
+
}), {};
|
|
1916
|
+
},
|
|
1917
|
+
animation: ({ from: n, to: s, context: o }) => {
|
|
1918
|
+
const i = o.direction === "forward", r = new b({
|
|
1919
|
+
element: n,
|
|
1920
|
+
integrator: w.from(t),
|
|
1921
|
+
style: (c) => ({ transform: `translate3d(${i ? -100 * c : 100 * c}%, 0, 0)` }),
|
|
1798
1922
|
// The outgoing node is the real Activity page and gets reused on the
|
|
1799
1923
|
// next navigation, so reset every inline style we wrote to it (mirror
|
|
1800
1924
|
// the incoming cleanup, plus the out-only pointerEvents).
|
|
1801
1925
|
onComplete: () => {
|
|
1802
|
-
|
|
1926
|
+
n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.contain = "", n.style.transform = "", n.style.pointerEvents = "";
|
|
1803
1927
|
}
|
|
1804
|
-
}),
|
|
1805
|
-
element:
|
|
1806
|
-
integrator:
|
|
1807
|
-
style: (
|
|
1928
|
+
}), l = new b({
|
|
1929
|
+
element: s,
|
|
1930
|
+
integrator: w.from(t),
|
|
1931
|
+
style: (c, a) => ({ transform: `translate3d(${i ? a * 100 : a * -100}%, 0, 0)` }),
|
|
1808
1932
|
onComplete: () => {
|
|
1809
|
-
|
|
1933
|
+
s.style.willChange = "auto", s.style.backfaceVisibility = "", s.style.contain = "", s.style.transform = "";
|
|
1810
1934
|
}
|
|
1811
1935
|
});
|
|
1812
|
-
return new
|
|
1936
|
+
return new P([r, l], { mode: "parallel" });
|
|
1813
1937
|
}
|
|
1814
1938
|
};
|
|
1815
1939
|
};
|
|
1816
|
-
function
|
|
1817
|
-
|
|
1818
|
-
return ot(
|
|
1819
|
-
t,
|
|
1820
|
-
{ forward: "left", backward: "right" },
|
|
1821
|
-
(n) => Kn({ direction: n })
|
|
1822
|
-
);
|
|
1940
|
+
function po(e = {}) {
|
|
1941
|
+
return ws();
|
|
1823
1942
|
}
|
|
1824
|
-
const
|
|
1943
|
+
const Ss = {
|
|
1825
1944
|
spring: { stiffness: 17, damping: 6 }
|
|
1826
|
-
},
|
|
1827
|
-
const t = e.physics ??
|
|
1945
|
+
}, st = 20, V = 800, xs = (e = {}) => {
|
|
1946
|
+
const t = e.physics ?? Ss;
|
|
1828
1947
|
return {
|
|
1829
1948
|
prepare: ({ from: n, to: s }) => (n.then((o) => {
|
|
1830
|
-
o.style.willChange = "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.pointerEvents = "none", o.style.transform = `perspective(${
|
|
1949
|
+
o.style.willChange = "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.pointerEvents = "none", o.style.transform = `perspective(${V}px) rotateY(0deg) translate3d(0%, 0, 0)`;
|
|
1831
1950
|
}), s.then((o) => {
|
|
1832
|
-
o.style.willChange = "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.transform = `perspective(${
|
|
1951
|
+
o.style.willChange = "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.transform = `perspective(${V}px) rotateY(${st}deg) translate3d(-100%, 0, 0)`;
|
|
1833
1952
|
}), {}),
|
|
1834
1953
|
animation: ({ from: n, to: s }) => {
|
|
1835
|
-
const o = new
|
|
1954
|
+
const o = new b({
|
|
1836
1955
|
element: n,
|
|
1837
|
-
integrator:
|
|
1838
|
-
style: (
|
|
1839
|
-
const
|
|
1956
|
+
integrator: w.from(t),
|
|
1957
|
+
style: (r) => {
|
|
1958
|
+
const l = -r * st, c = r * 100;
|
|
1840
1959
|
return {
|
|
1841
|
-
transform: `perspective(${
|
|
1960
|
+
transform: `perspective(${V}px) rotateY(${l}deg) translate3d(${c}%, 0, 0)`
|
|
1842
1961
|
};
|
|
1843
1962
|
},
|
|
1844
1963
|
// The outgoing node is reused (Activity/cacheComponents re-hide it),
|
|
@@ -1847,97 +1966,123 @@ const Gn = {
|
|
|
1847
1966
|
onComplete: () => {
|
|
1848
1967
|
n.style.transform = "", n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.contain = "", n.style.pointerEvents = "";
|
|
1849
1968
|
}
|
|
1850
|
-
}), i = new
|
|
1969
|
+
}), i = new b({
|
|
1851
1970
|
element: s,
|
|
1852
|
-
integrator:
|
|
1853
|
-
style: (
|
|
1854
|
-
const
|
|
1971
|
+
integrator: w.from(t),
|
|
1972
|
+
style: (r, l) => {
|
|
1973
|
+
const c = l * st, a = -l * 100;
|
|
1855
1974
|
return {
|
|
1856
|
-
transform: `perspective(${
|
|
1975
|
+
transform: `perspective(${V}px) rotateY(${c}deg) translate3d(${a}%, 0, 0)`
|
|
1857
1976
|
};
|
|
1858
1977
|
},
|
|
1859
1978
|
onComplete: () => {
|
|
1860
1979
|
s.style.transform = "", s.style.willChange = "auto", s.style.backfaceVisibility = "", s.style.contain = "";
|
|
1861
1980
|
}
|
|
1862
1981
|
});
|
|
1863
|
-
return new
|
|
1982
|
+
return new P([o, i], { mode: "sequence" });
|
|
1864
1983
|
}
|
|
1865
1984
|
};
|
|
1866
1985
|
};
|
|
1867
|
-
function
|
|
1868
|
-
|
|
1869
|
-
|
|
1986
|
+
function uo(e = {}) {
|
|
1987
|
+
return xs();
|
|
1988
|
+
}
|
|
1989
|
+
function Cs(e, t) {
|
|
1990
|
+
return t.left >= e.left - 0.01 && t.top >= e.top - 0.01 && t.left + t.width <= e.left + e.width + 0.01 && t.top + t.height <= e.top + e.height + 0.01;
|
|
1991
|
+
}
|
|
1992
|
+
function Zt(e) {
|
|
1993
|
+
const t = () => ({
|
|
1994
|
+
enterContent: e.enterRect,
|
|
1995
|
+
exitContent: e.exitRect,
|
|
1996
|
+
startWindow: e.enterRect,
|
|
1997
|
+
scaleX: e.exitRect.width / e.enterRect.width,
|
|
1998
|
+
scaleY: e.exitRect.height / e.enterRect.height
|
|
1999
|
+
}), { enterMedia: n, exitMedia: s } = e;
|
|
2000
|
+
if (!n || !s || !Xt(n, s)) return t();
|
|
2001
|
+
const o = n.content, i = s.content;
|
|
2002
|
+
if (o.width <= 0 || o.height <= 0 || i.width <= 0 || i.height <= 0)
|
|
2003
|
+
return t();
|
|
2004
|
+
const r = i.width / o.width, l = i.height / o.height, c = Wt(
|
|
2005
|
+
o,
|
|
2006
|
+
i,
|
|
2007
|
+
s.window,
|
|
2008
|
+
r,
|
|
2009
|
+
l
|
|
2010
|
+
);
|
|
2011
|
+
return Cs(n.window, c) ? { enterContent: o, exitContent: i, startWindow: c, scaleX: r, scaleY: l } : t();
|
|
1870
2012
|
}
|
|
1871
|
-
function
|
|
1872
|
-
enterRect: e,
|
|
1873
|
-
exitRect: t,
|
|
1874
|
-
pageRect: n,
|
|
1875
|
-
scrollOffset: s,
|
|
1876
|
-
enterRadius: o,
|
|
1877
|
-
exitRadius: i
|
|
1878
|
-
}) {
|
|
1879
|
-
const l = t.left - e.left + (t.width - e.width) / 2 - s.x, a = t.top - e.top + (t.height - e.height) / 2 - s.y, r = t.width / e.width, c = t.height / e.height, f = e.top / n.height * 100, p = (n.width - (e.left + e.width)) / n.width * 100, d = (n.height - (e.top + e.height)) / n.height * 100, u = e.left / n.width * 100;
|
|
2013
|
+
function Gt(e, t) {
|
|
1880
2014
|
return {
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
2015
|
+
top: e.top / t.height * 100,
|
|
2016
|
+
right: (t.width - (e.left + e.width)) / t.width * 100,
|
|
2017
|
+
bottom: (t.height - (e.top + e.height)) / t.height * 100,
|
|
2018
|
+
left: e.left / t.width * 100
|
|
2019
|
+
};
|
|
2020
|
+
}
|
|
2021
|
+
function jt(e, t, n) {
|
|
2022
|
+
return {
|
|
2023
|
+
x: e / Math.max(Math.abs(t), 1e-6),
|
|
2024
|
+
y: e / Math.max(Math.abs(n), 1e-6)
|
|
2025
|
+
};
|
|
2026
|
+
}
|
|
2027
|
+
function $s(e) {
|
|
2028
|
+
const { pageRect: t, scrollOffset: n, enterRadius: s, exitRadius: o } = e, i = Zt(e), { enterContent: r, exitContent: l, startWindow: c, scaleX: a, scaleY: p } = i, d = l.left - r.left + (l.width - r.width) / 2 - n.x, u = l.top - r.top + (l.height - r.height) / 2 - n.y, h = Gt(c, t);
|
|
2029
|
+
return {
|
|
2030
|
+
transformOrigin: `${O(r)}px ${D(r)}px`,
|
|
2031
|
+
animate: (f) => {
|
|
2032
|
+
const y = 1 - f, m = 1 + (a - 1) * y, S = 1 + (p - 1) * y, g = Math.max(0, o * y + s * (1 - y)), $ = jt(g, m, S);
|
|
1884
2033
|
return {
|
|
1885
|
-
clipPath: `inset(${
|
|
1886
|
-
transform: `translate(${
|
|
2034
|
+
clipPath: `inset(${h.top * y}% ${h.right * y}% ${h.bottom * y}% ${h.left * y}% round ${$.x}px / ${$.y}px)`,
|
|
2035
|
+
transform: `translate(${d * y}px, ${u * y}px) scale(${m}, ${S})`
|
|
1887
2036
|
};
|
|
1888
2037
|
}
|
|
1889
2038
|
};
|
|
1890
2039
|
}
|
|
1891
|
-
function
|
|
1892
|
-
|
|
1893
|
-
exitRect: t,
|
|
1894
|
-
pageRect: n,
|
|
1895
|
-
scrollOffset: s,
|
|
1896
|
-
enterRadius: o,
|
|
1897
|
-
exitRadius: i
|
|
1898
|
-
}) {
|
|
1899
|
-
const l = t.left - e.left + (t.width - e.width) / 2 + s.x, a = t.top - e.top + (t.height - e.height) / 2 + s.y, r = t.width / e.width, c = t.height / e.height, f = e.top / n.height * 100, p = (n.width - (e.left + e.width)) / n.width * 100, d = (n.height - (e.top + e.height)) / n.height * 100, u = e.left / n.width * 100;
|
|
2040
|
+
function Es(e) {
|
|
2041
|
+
const { pageRect: t, scrollOffset: n, enterRadius: s, exitRadius: o } = e, i = Zt(e), { enterContent: r, exitContent: l, startWindow: c, scaleX: a, scaleY: p } = i, d = l.left - r.left + (l.width - r.width) / 2 + n.x, u = l.top - r.top + (l.height - r.height) / 2 + n.y, h = Gt(c, t);
|
|
1900
2042
|
return {
|
|
1901
|
-
transformOrigin: `${
|
|
1902
|
-
animate: (
|
|
1903
|
-
const
|
|
2043
|
+
transformOrigin: `${O(r)}px ${D(r)}px`,
|
|
2044
|
+
animate: (f) => {
|
|
2045
|
+
const y = 1 - f, m = 1 + (a - 1) * y, S = 1 + (p - 1) * y, g = Math.max(0, s * (1 - y) + o * y), $ = jt(g, m, S);
|
|
1904
2046
|
return {
|
|
1905
|
-
clipPath: `inset(${
|
|
1906
|
-
transform: `translate(${
|
|
2047
|
+
clipPath: `inset(${h.top * y}% ${h.right * y}% ${h.bottom * y}% ${h.left * y}% round ${$.x}px / ${$.y}px)`,
|
|
2048
|
+
transform: `translate(${d * y - n.x}px, ${u * y}px) scale(${m}, ${S})`
|
|
1907
2049
|
};
|
|
1908
2050
|
}
|
|
1909
2051
|
};
|
|
1910
2052
|
}
|
|
1911
|
-
const
|
|
2053
|
+
const Ps = {
|
|
1912
2054
|
spring: {
|
|
1913
|
-
stiffness:
|
|
1914
|
-
damping:
|
|
1915
|
-
doubleSpring:
|
|
2055
|
+
stiffness: 380,
|
|
2056
|
+
damping: 30,
|
|
2057
|
+
doubleSpring: {
|
|
2058
|
+
stiffness: 260,
|
|
2059
|
+
damping: 30
|
|
2060
|
+
}
|
|
1916
2061
|
}
|
|
1917
|
-
},
|
|
1918
|
-
function
|
|
2062
|
+
}, qt = 0.12, _s = 18;
|
|
2063
|
+
function As() {
|
|
1919
2064
|
return {
|
|
1920
2065
|
transformOrigin: "50% 50%",
|
|
1921
2066
|
animate: (e) => {
|
|
1922
2067
|
const t = 1 - e;
|
|
1923
2068
|
return {
|
|
1924
|
-
transform: `scale(${1 -
|
|
2069
|
+
transform: `scale(${1 - qt * t})`
|
|
1925
2070
|
};
|
|
1926
2071
|
}
|
|
1927
2072
|
};
|
|
1928
2073
|
}
|
|
1929
|
-
function
|
|
2074
|
+
function Is() {
|
|
1930
2075
|
return {
|
|
1931
2076
|
transformOrigin: "50% 50%",
|
|
1932
2077
|
animate: (e) => {
|
|
1933
2078
|
const t = 1 - e;
|
|
1934
2079
|
return {
|
|
1935
|
-
transform: `scale(${1 -
|
|
2080
|
+
transform: `scale(${1 - qt * t})`
|
|
1936
2081
|
};
|
|
1937
2082
|
}
|
|
1938
2083
|
};
|
|
1939
2084
|
}
|
|
1940
|
-
const
|
|
2085
|
+
const ot = {
|
|
1941
2086
|
willChange: "backdrop-filter",
|
|
1942
2087
|
// `top` + `height` are set per-transition in OverlayStrategy.contribute (they
|
|
1943
2088
|
// track the live scroll position), so they are intentionally omitted here.
|
|
@@ -1953,132 +2098,129 @@ const et = {
|
|
|
1953
2098
|
WebkitBackdropFilter: "blur(0px)"
|
|
1954
2099
|
},
|
|
1955
2100
|
style: (e, t) => {
|
|
1956
|
-
const n = e === "enter" ? t : 1 - t, s = `blur(${
|
|
2101
|
+
const n = e === "enter" ? t : 1 - t, s = `blur(${_s * n}px)`;
|
|
1957
2102
|
return {
|
|
1958
2103
|
backdropFilter: s,
|
|
1959
2104
|
WebkitBackdropFilter: s
|
|
1960
2105
|
};
|
|
1961
2106
|
}
|
|
1962
2107
|
};
|
|
1963
|
-
class
|
|
2108
|
+
class Rs {
|
|
1964
2109
|
constructor() {
|
|
1965
|
-
|
|
2110
|
+
E(this, "physics", Ps);
|
|
1966
2111
|
}
|
|
1967
2112
|
contribute(t) {
|
|
1968
|
-
const { from: n, to: s, resolved: o, physics: i } = t,
|
|
1969
|
-
return
|
|
1970
|
-
new
|
|
1971
|
-
element:
|
|
1972
|
-
integrator:
|
|
1973
|
-
style:
|
|
2113
|
+
const { from: n, to: s, resolved: o, physics: i } = t, r = o.mode === "enter", l = r ? n : s, c = r ? As() : Is();
|
|
2114
|
+
return c && (l.style.transformOrigin = c.transformOrigin), [
|
|
2115
|
+
new b({
|
|
2116
|
+
element: l,
|
|
2117
|
+
integrator: w.from(i),
|
|
2118
|
+
style: r ? (a, p) => c.animate(p) : (a) => c.animate(a)
|
|
1974
2119
|
})
|
|
1975
2120
|
];
|
|
1976
2121
|
}
|
|
1977
2122
|
}
|
|
1978
|
-
class
|
|
2123
|
+
class vs {
|
|
1979
2124
|
prepare(t) {
|
|
1980
2125
|
const n = t.createElement("zoom-overlay");
|
|
1981
|
-
return Object.assign(n.style,
|
|
2126
|
+
return Object.assign(n.style, ot.initialStyle), n.style.willChange = ot.willChange, t.context.positionedParent.appendChild(n), { overlay: n };
|
|
1982
2127
|
}
|
|
1983
2128
|
contribute(t) {
|
|
1984
2129
|
const n = t.extras.overlay;
|
|
1985
2130
|
if (!n) return [];
|
|
1986
|
-
n.style.zIndex =
|
|
1987
|
-
const s =
|
|
2131
|
+
n.style.zIndex = zt;
|
|
2132
|
+
const s = Ht(t.context, "to");
|
|
1988
2133
|
return n.style.top = `${s.top}px`, n.style.height = `${s.height}px`, [
|
|
1989
|
-
new
|
|
2134
|
+
new b({
|
|
1990
2135
|
element: n,
|
|
1991
|
-
integrator:
|
|
1992
|
-
style: (o) =>
|
|
2136
|
+
integrator: w.from(t.physics),
|
|
2137
|
+
style: (o) => ot.style(t.resolved.mode, o)
|
|
1993
2138
|
})
|
|
1994
2139
|
];
|
|
1995
2140
|
}
|
|
1996
2141
|
}
|
|
1997
|
-
const
|
|
2142
|
+
const Os = {
|
|
1998
2143
|
spring: {
|
|
1999
2144
|
stiffness: 430,
|
|
2000
2145
|
damping: 33,
|
|
2001
2146
|
doubleSpring: 1
|
|
2002
2147
|
}
|
|
2003
2148
|
};
|
|
2004
|
-
function
|
|
2149
|
+
function Ds({
|
|
2005
2150
|
enterRect: e,
|
|
2006
2151
|
exitRect: t,
|
|
2007
2152
|
scrollOffset: n
|
|
2008
2153
|
}) {
|
|
2009
|
-
const s = e.left - t.left + (e.width - t.width) / 2 + n.x, o = e.top - t.top + (e.height - t.height) / 2 + n.y, i = e.width / t.width,
|
|
2154
|
+
const s = e.left - t.left + (e.width - t.width) / 2 + n.x, o = e.top - t.top + (e.height - t.height) / 2 + n.y, i = e.width / t.width, r = e.height / t.height, l = Math.max(i, r);
|
|
2010
2155
|
return {
|
|
2011
2156
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
2012
|
-
animate: (
|
|
2013
|
-
const
|
|
2157
|
+
animate: (c) => {
|
|
2158
|
+
const a = 1 - c;
|
|
2014
2159
|
return {
|
|
2015
|
-
transform: `translate(${s *
|
|
2160
|
+
transform: `translate(${s * a - n.x}px, ${o * a}px) scale(${1 + (l - 1) * a})`
|
|
2016
2161
|
};
|
|
2017
2162
|
}
|
|
2018
2163
|
};
|
|
2019
2164
|
}
|
|
2020
|
-
function
|
|
2165
|
+
function Fs({
|
|
2021
2166
|
enterRect: e,
|
|
2022
2167
|
exitRect: t,
|
|
2023
2168
|
scrollOffset: n
|
|
2024
2169
|
}) {
|
|
2025
|
-
const s = e.left - t.left + (e.width - t.width) / 2 - n.x, o = e.top - t.top + (e.height - t.height) / 2 - n.y, i = e.width / t.width,
|
|
2170
|
+
const s = e.left - t.left + (e.width - t.width) / 2 - n.x, o = e.top - t.top + (e.height - t.height) / 2 - n.y, i = e.width / t.width, r = e.height / t.height, l = Math.max(i, r);
|
|
2026
2171
|
return {
|
|
2027
2172
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
2028
|
-
animate: (
|
|
2029
|
-
const
|
|
2173
|
+
animate: (c) => {
|
|
2174
|
+
const a = 1 - c;
|
|
2030
2175
|
return {
|
|
2031
|
-
transform: `translate(${s *
|
|
2176
|
+
transform: `translate(${s * a}px, ${o * a}px) scale(${1 + (l - 1) * a})`
|
|
2032
2177
|
};
|
|
2033
2178
|
}
|
|
2034
2179
|
};
|
|
2035
2180
|
}
|
|
2036
|
-
class
|
|
2181
|
+
class Ts {
|
|
2037
2182
|
constructor() {
|
|
2038
|
-
|
|
2183
|
+
E(this, "physics", Os);
|
|
2039
2184
|
}
|
|
2040
2185
|
contribute(t) {
|
|
2041
|
-
const { from: n, to: s, resolved: o, input: i, physics:
|
|
2042
|
-
return
|
|
2043
|
-
new
|
|
2044
|
-
element:
|
|
2045
|
-
integrator:
|
|
2046
|
-
style:
|
|
2186
|
+
const { from: n, to: s, resolved: o, input: i, physics: r } = t, l = o.mode === "enter", c = l ? n : s, a = l ? Ds(i) : Fs(i);
|
|
2187
|
+
return a && (c.style.transformOrigin = a.transformOrigin), [
|
|
2188
|
+
new b({
|
|
2189
|
+
element: c,
|
|
2190
|
+
integrator: w.from(r),
|
|
2191
|
+
style: l ? (p, d) => a.animate(d) : (p) => a.animate(p)
|
|
2047
2192
|
})
|
|
2048
2193
|
];
|
|
2049
2194
|
}
|
|
2050
2195
|
}
|
|
2051
|
-
const
|
|
2196
|
+
const Ms = {
|
|
2052
2197
|
spring: {
|
|
2053
2198
|
stiffness: 530,
|
|
2054
2199
|
damping: 34,
|
|
2055
2200
|
doubleSpring: 1
|
|
2056
2201
|
}
|
|
2057
2202
|
};
|
|
2058
|
-
class
|
|
2203
|
+
class Ys {
|
|
2059
2204
|
constructor() {
|
|
2060
|
-
|
|
2205
|
+
E(this, "physics", Ms);
|
|
2061
2206
|
}
|
|
2062
2207
|
contribute(t) {
|
|
2063
2208
|
return [];
|
|
2064
2209
|
}
|
|
2065
2210
|
}
|
|
2066
|
-
const
|
|
2067
|
-
expand: () => new
|
|
2068
|
-
static: () => new
|
|
2069
|
-
blur: () => new
|
|
2211
|
+
const Ls = {
|
|
2212
|
+
expand: () => new Ts(),
|
|
2213
|
+
static: () => new Ys(),
|
|
2214
|
+
blur: () => new Rs()
|
|
2070
2215
|
};
|
|
2071
|
-
function
|
|
2072
|
-
return
|
|
2216
|
+
function ks(e) {
|
|
2217
|
+
return Ls[e]();
|
|
2073
2218
|
}
|
|
2074
|
-
const
|
|
2075
|
-
function
|
|
2076
|
-
|
|
2077
|
-
if (!t) return 0;
|
|
2078
|
-
const n = parseFloat(t);
|
|
2079
|
-
return Number.isFinite(n) && n > 0 ? n : 0;
|
|
2219
|
+
const lt = "data-zoom-enter-key", Tt = "data-zoom-exit-key", Mt = "data-zoom-radius";
|
|
2220
|
+
function Hs(e, t) {
|
|
2221
|
+
return Math.abs(e.left - t.left) < 0.01 && Math.abs(e.top - t.top) < 0.01 && Math.abs(e.width - t.width) < 0.01 && Math.abs(e.height - t.height) < 0.01;
|
|
2080
2222
|
}
|
|
2081
|
-
function
|
|
2223
|
+
function Ns(e, t) {
|
|
2082
2224
|
const n = [];
|
|
2083
2225
|
let s = t;
|
|
2084
2226
|
for (; s && s !== e; ) {
|
|
@@ -2090,127 +2232,145 @@ function ms(e, t) {
|
|
|
2090
2232
|
}
|
|
2091
2233
|
return n;
|
|
2092
2234
|
}
|
|
2093
|
-
function
|
|
2094
|
-
const t = e.querySelectorAll(`[${
|
|
2235
|
+
function Yt(e) {
|
|
2236
|
+
const t = e.querySelectorAll(`[${lt}]`);
|
|
2095
2237
|
return t.length !== 1 ? null : t[0];
|
|
2096
2238
|
}
|
|
2097
|
-
function
|
|
2098
|
-
const n = e.querySelectorAll(`[${
|
|
2239
|
+
function Lt(e, t) {
|
|
2240
|
+
const n = e.querySelectorAll(`[${Tt}]`);
|
|
2099
2241
|
for (const s of n)
|
|
2100
|
-
if (s.getAttribute(
|
|
2242
|
+
if (s.getAttribute(Tt) === t)
|
|
2101
2243
|
return s;
|
|
2102
2244
|
return null;
|
|
2103
2245
|
}
|
|
2104
|
-
function
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
if (n && !s) {
|
|
2113
|
-
const o = n.getAttribute(nt);
|
|
2114
|
-
if (!o) return null;
|
|
2115
|
-
const i = Ft(t, o);
|
|
2116
|
-
return i ? { mode: "exit", enterEl: n, exitEl: i } : null;
|
|
2246
|
+
function zs(e, t, n) {
|
|
2247
|
+
if (n === "forward") {
|
|
2248
|
+
const r = Yt(t);
|
|
2249
|
+
if (!r) return null;
|
|
2250
|
+
const l = r.getAttribute(lt);
|
|
2251
|
+
if (!l) return null;
|
|
2252
|
+
const c = Lt(e, l);
|
|
2253
|
+
return c ? { mode: "enter", enterEl: r, exitEl: c } : null;
|
|
2117
2254
|
}
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2255
|
+
const s = Yt(e);
|
|
2256
|
+
if (!s) return null;
|
|
2257
|
+
const o = s.getAttribute(lt);
|
|
2258
|
+
if (!o) return null;
|
|
2259
|
+
const i = Lt(t, o);
|
|
2260
|
+
return i ? { mode: "exit", enterEl: s, exitEl: i } : null;
|
|
2261
|
+
}
|
|
2262
|
+
function Us(e, t, n, s) {
|
|
2263
|
+
const o = e.mode === "enter" ? n : t, i = e.mode === "enter" ? t : n, r = z(o, e.enterEl), l = z(i, e.exitEl), c = at(
|
|
2264
|
+
e.enterEl,
|
|
2265
|
+
r,
|
|
2266
|
+
(m) => z(o, m),
|
|
2267
|
+
{
|
|
2268
|
+
legacyRadiusAttribute: Mt
|
|
2269
|
+
}
|
|
2270
|
+
), a = at(
|
|
2271
|
+
e.exitEl,
|
|
2272
|
+
l,
|
|
2273
|
+
(m) => z(i, m),
|
|
2274
|
+
{
|
|
2275
|
+
legacyRadiusAttribute: Mt
|
|
2276
|
+
}
|
|
2277
|
+
), [p, d] = Bt(c, a), u = p.contentAware && d.contentAware, h = e.mode === "enter" ? n.getBoundingClientRect() : t.getBoundingClientRect(), f = {
|
|
2278
|
+
left: 0,
|
|
2279
|
+
top: 0,
|
|
2280
|
+
width: h.width,
|
|
2281
|
+
height: h.height
|
|
2282
|
+
}, y = p.radiusSource === "legacy" || Hs(p.window, f) ? p.radius : 0;
|
|
2121
2283
|
return {
|
|
2122
|
-
enterRect:
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
),
|
|
2130
|
-
pageRect: e.mode === "enter" ? n.getBoundingClientRect() : t.getBoundingClientRect(),
|
|
2284
|
+
enterRect: r,
|
|
2285
|
+
exitRect: l,
|
|
2286
|
+
...u ? {
|
|
2287
|
+
enterMedia: p,
|
|
2288
|
+
exitMedia: d
|
|
2289
|
+
} : {},
|
|
2290
|
+
pageRect: h,
|
|
2131
2291
|
scrollOffset: s,
|
|
2132
|
-
enterRadius:
|
|
2133
|
-
exitRadius:
|
|
2292
|
+
enterRadius: y,
|
|
2293
|
+
exitRadius: d.radius
|
|
2134
2294
|
};
|
|
2135
2295
|
}
|
|
2136
|
-
class
|
|
2296
|
+
class Vs {
|
|
2137
2297
|
prepare(t) {
|
|
2138
2298
|
t.from.then((n) => {
|
|
2139
2299
|
n.style.willChange = "transform, clip-path, opacity", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint";
|
|
2140
2300
|
});
|
|
2141
2301
|
}
|
|
2142
2302
|
contribute(t) {
|
|
2143
|
-
const { from: n, to: s, resolved: o, input: i, physics:
|
|
2144
|
-
|
|
2145
|
-
const
|
|
2146
|
-
n.style.zIndex =
|
|
2147
|
-
const
|
|
2148
|
-
return s.style.zIndex =
|
|
2149
|
-
|
|
2303
|
+
const { from: n, to: s, resolved: o, input: i, physics: r, onComplete: l } = t, c = o.mode === "enter", a = c ? $s(i) : Es(i), p = c ? s : n, d = c ? "t" : "u";
|
|
2304
|
+
a && (p.style.transformOrigin = a.transformOrigin);
|
|
2305
|
+
const u = c ? R : v, h = c ? v : R, f = n.style.zIndex;
|
|
2306
|
+
n.style.zIndex = u;
|
|
2307
|
+
const y = s.style.zIndex, m = s.style.position;
|
|
2308
|
+
return s.style.zIndex = h, s.style.position = "relative", l(() => {
|
|
2309
|
+
p.style.willChange = "auto", p.style.backfaceVisibility = "", p.style.transformOrigin = "", p.style.contain = "", n.style.zIndex = f, s.style.zIndex === h && (s.style.zIndex = y), s.style.position === "relative" && (s.style.position = m), s.style.transformOrigin = "", n.style.willChange = "auto", n.style.backfaceVisibility = "", n.style.transformOrigin = "", n.style.contain = "", n.style.transform = "", n.style.clipPath = "";
|
|
2150
2310
|
}), [
|
|
2151
|
-
new
|
|
2152
|
-
element:
|
|
2153
|
-
integrator:
|
|
2311
|
+
new b({
|
|
2312
|
+
element: p,
|
|
2313
|
+
integrator: w.from(r),
|
|
2154
2314
|
// Enter: tile expands as `t` (0 → 1). Exit: tile shrinks as `u` —
|
|
2155
2315
|
// the legacy convention from v5's outAnim path. Either way, feed
|
|
2156
2316
|
// the progress that matches the tileConfig's authored direction.
|
|
2157
|
-
style:
|
|
2317
|
+
style: d === "t" ? (S) => a.animate(S) : (S, g) => a.animate(g)
|
|
2158
2318
|
})
|
|
2159
2319
|
];
|
|
2160
2320
|
}
|
|
2161
2321
|
}
|
|
2162
|
-
class
|
|
2322
|
+
class Xs {
|
|
2163
2323
|
contribute(t) {
|
|
2164
|
-
const { resolved: n, physics: s, from: o, to: i, onComplete:
|
|
2165
|
-
if (
|
|
2166
|
-
const
|
|
2324
|
+
const { resolved: n, physics: s, from: o, to: i, onComplete: r } = t, l = n.mode === "enter" ? i : o, c = Ns(l, n.enterEl);
|
|
2325
|
+
if (c.length === 0) return [];
|
|
2326
|
+
const a = c.map((p) => p.style.opacity);
|
|
2167
2327
|
if (n.mode === "enter")
|
|
2168
|
-
for (const
|
|
2169
|
-
return
|
|
2170
|
-
for (let
|
|
2171
|
-
const
|
|
2172
|
-
|
|
2328
|
+
for (const p of c) p.style.opacity = "0";
|
|
2329
|
+
return r(() => {
|
|
2330
|
+
for (let p = 0; p < c.length; p++) {
|
|
2331
|
+
const d = c[p];
|
|
2332
|
+
d && (d.style.opacity = a[p] ?? "");
|
|
2173
2333
|
}
|
|
2174
|
-
}),
|
|
2175
|
-
(
|
|
2176
|
-
element:
|
|
2177
|
-
integrator:
|
|
2178
|
-
style: (
|
|
2179
|
-
opacity: n.mode === "enter" ?
|
|
2334
|
+
}), c.map(
|
|
2335
|
+
(p) => new b({
|
|
2336
|
+
element: p,
|
|
2337
|
+
integrator: w.from(s),
|
|
2338
|
+
style: (d, u) => ({
|
|
2339
|
+
opacity: n.mode === "enter" ? d : u
|
|
2180
2340
|
})
|
|
2181
2341
|
})
|
|
2182
2342
|
);
|
|
2183
2343
|
}
|
|
2184
2344
|
}
|
|
2185
|
-
class
|
|
2345
|
+
class Kt {
|
|
2186
2346
|
contribute() {
|
|
2187
2347
|
return [];
|
|
2188
2348
|
}
|
|
2189
2349
|
}
|
|
2190
|
-
const
|
|
2191
|
-
default: () => new
|
|
2192
|
-
fade: () => new
|
|
2350
|
+
const Bs = {
|
|
2351
|
+
default: () => new Kt(),
|
|
2352
|
+
fade: () => new Xs()
|
|
2193
2353
|
};
|
|
2194
|
-
function
|
|
2195
|
-
return
|
|
2354
|
+
function Ws(e) {
|
|
2355
|
+
return Bs[e]();
|
|
2196
2356
|
}
|
|
2197
|
-
class
|
|
2357
|
+
class Zs extends Kt {
|
|
2198
2358
|
}
|
|
2199
|
-
function
|
|
2200
|
-
const t =
|
|
2359
|
+
function Gs(e) {
|
|
2360
|
+
const t = ks(e.type);
|
|
2201
2361
|
return { strategies: [
|
|
2202
|
-
new
|
|
2362
|
+
new Vs(),
|
|
2203
2363
|
t,
|
|
2204
|
-
|
|
2205
|
-
new
|
|
2364
|
+
Ws(e.variant),
|
|
2365
|
+
new Zs(),
|
|
2206
2366
|
// Overlay is intrinsically tied to backdrop-filter-driven types. Today
|
|
2207
2367
|
// that's only `blur`; the table-driven factory above owns the mapping
|
|
2208
2368
|
// so this conditional is the single line that knows the relationship.
|
|
2209
|
-
...e.type === "blur" ? [new
|
|
2369
|
+
...e.type === "blur" ? [new vs()] : []
|
|
2210
2370
|
], physics: t.physics };
|
|
2211
2371
|
}
|
|
2212
|
-
const
|
|
2213
|
-
const { strategies: t, physics: n } =
|
|
2372
|
+
const js = (e) => {
|
|
2373
|
+
const { strategies: t, physics: n } = Gs(e);
|
|
2214
2374
|
return {
|
|
2215
2375
|
prepare: (s) => {
|
|
2216
2376
|
const o = {
|
|
@@ -2222,81 +2382,78 @@ const Ps = (e) => {
|
|
|
2222
2382
|
// compatible.
|
|
2223
2383
|
createElement: s.createElement
|
|
2224
2384
|
}, i = {};
|
|
2225
|
-
for (const
|
|
2226
|
-
if (!
|
|
2227
|
-
const
|
|
2228
|
-
|
|
2385
|
+
for (const r of t) {
|
|
2386
|
+
if (!r.prepare) continue;
|
|
2387
|
+
const l = r.prepare(o);
|
|
2388
|
+
l && Object.assign(i, l);
|
|
2229
2389
|
}
|
|
2230
2390
|
return i;
|
|
2231
2391
|
},
|
|
2232
|
-
animation: ({ from: s, to: o, context: i, ...
|
|
2233
|
-
const
|
|
2234
|
-
if (!
|
|
2235
|
-
return new
|
|
2236
|
-
const
|
|
2392
|
+
animation: ({ from: s, to: o, context: i, ...r }) => {
|
|
2393
|
+
const l = zs(s, o, i.direction);
|
|
2394
|
+
if (!l)
|
|
2395
|
+
return new P([], { mode: "parallel" });
|
|
2396
|
+
const c = Us(l, s, o, i.scrollOffset), a = [], d = {
|
|
2237
2397
|
from: s,
|
|
2238
2398
|
to: o,
|
|
2239
|
-
resolved:
|
|
2240
|
-
input:
|
|
2399
|
+
resolved: l,
|
|
2400
|
+
input: c,
|
|
2241
2401
|
physics: n,
|
|
2242
2402
|
context: i,
|
|
2243
|
-
extras:
|
|
2244
|
-
onComplete: (
|
|
2245
|
-
|
|
2403
|
+
extras: r,
|
|
2404
|
+
onComplete: (f) => {
|
|
2405
|
+
a.push(f);
|
|
2246
2406
|
}
|
|
2247
|
-
},
|
|
2248
|
-
for (const
|
|
2249
|
-
|
|
2250
|
-
const
|
|
2251
|
-
if (
|
|
2252
|
-
const
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
for (const
|
|
2407
|
+
}, u = [];
|
|
2408
|
+
for (const f of t)
|
|
2409
|
+
f.contribute && u.push(...f.contribute(d));
|
|
2410
|
+
const h = u[0];
|
|
2411
|
+
if (h) {
|
|
2412
|
+
const f = h.onComplete;
|
|
2413
|
+
h.onComplete = () => {
|
|
2414
|
+
f == null || f();
|
|
2415
|
+
for (const y of a)
|
|
2256
2416
|
try {
|
|
2257
|
-
|
|
2258
|
-
} catch (
|
|
2259
|
-
console.error("[zoom] cleanup error",
|
|
2417
|
+
y();
|
|
2418
|
+
} catch (m) {
|
|
2419
|
+
console.error("[zoom] cleanup error", m);
|
|
2260
2420
|
}
|
|
2261
2421
|
};
|
|
2262
2422
|
}
|
|
2263
|
-
for (const
|
|
2264
|
-
if (!(
|
|
2265
|
-
const
|
|
2266
|
-
|
|
2267
|
-
|
|
2423
|
+
for (const f of u) {
|
|
2424
|
+
if (!(f instanceof b)) continue;
|
|
2425
|
+
const y = f.onComplete;
|
|
2426
|
+
f.onComplete = () => {
|
|
2427
|
+
y == null || y(), f.releaseFill();
|
|
2268
2428
|
};
|
|
2269
2429
|
}
|
|
2270
|
-
return new
|
|
2430
|
+
return new P(u, { mode: "parallel" });
|
|
2271
2431
|
}
|
|
2272
2432
|
};
|
|
2273
2433
|
};
|
|
2274
|
-
function
|
|
2434
|
+
function qs(e) {
|
|
2275
2435
|
const t = e.type ?? "static", n = e.variant ?? (e.fade ? "fade" : "default");
|
|
2276
2436
|
return { type: t, variant: n };
|
|
2277
2437
|
}
|
|
2278
|
-
function
|
|
2279
|
-
const t =
|
|
2280
|
-
return
|
|
2281
|
-
e.paths,
|
|
2282
|
-
() => Ps(t)
|
|
2283
|
-
);
|
|
2438
|
+
function fo(e = {}) {
|
|
2439
|
+
const t = qs(e);
|
|
2440
|
+
return js(t);
|
|
2284
2441
|
}
|
|
2285
2442
|
export {
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2443
|
+
mo as Animation,
|
|
2444
|
+
P as MultiAnimation,
|
|
2445
|
+
b as WebAnimation,
|
|
2446
|
+
to as axis,
|
|
2447
|
+
eo as blind,
|
|
2448
|
+
no as drill,
|
|
2449
|
+
so as fade,
|
|
2450
|
+
oo as film,
|
|
2451
|
+
io as hero,
|
|
2452
|
+
ro as jaemin,
|
|
2453
|
+
ao as rotate,
|
|
2454
|
+
lo as scroll,
|
|
2455
|
+
co as sheet,
|
|
2456
|
+
po as slide,
|
|
2457
|
+
uo as strip,
|
|
2458
|
+
fo as zoom
|
|
2302
2459
|
};
|