@ssgoi/core 3.2.0 → 3.2.2
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/dist/index.cjs +2 -2
- package/dist/index.js +206 -197
- package/dist/transition/transition.d.ts +20 -12
- package/dist/transition/transition.d.ts.map +1 -1
- package/dist/types.d.ts +11 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/view-transitions/index.cjs +8 -8
- package/dist/view-transitions/index.js +153 -153
- package/dist/view-transitions/instagram.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -10,10 +10,10 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
10
10
|
blindColor: l = j
|
|
11
11
|
} = t;
|
|
12
12
|
let i, c = null;
|
|
13
|
-
const o = (e,
|
|
13
|
+
const o = (e, p, y = "left") => {
|
|
14
14
|
window.getComputedStyle(e).position === "static" && (e.style.position = "relative");
|
|
15
|
-
const
|
|
16
|
-
|
|
15
|
+
const g = document.createElement("div");
|
|
16
|
+
g.className = "blind-container", g.style.cssText = `
|
|
17
17
|
position: absolute;
|
|
18
18
|
top: 0;
|
|
19
19
|
left: 0;
|
|
@@ -23,7 +23,7 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
23
23
|
z-index: 9999;
|
|
24
24
|
overflow: hidden;
|
|
25
25
|
`;
|
|
26
|
-
const
|
|
26
|
+
const u = [];
|
|
27
27
|
for (let m = 0; m < r; m++) {
|
|
28
28
|
const f = document.createElement("div");
|
|
29
29
|
if (s === "horizontal") {
|
|
@@ -35,8 +35,8 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
35
35
|
width: 100%;
|
|
36
36
|
height: ${$};
|
|
37
37
|
background: ${l};
|
|
38
|
-
transform: scaleX(${
|
|
39
|
-
transform-origin: ${
|
|
38
|
+
transform: scaleX(${p === "hidden" ? 0 : 1});
|
|
39
|
+
transform-origin: ${y} center;
|
|
40
40
|
will-change: transform;
|
|
41
41
|
`;
|
|
42
42
|
} else {
|
|
@@ -48,42 +48,42 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
48
48
|
width: ${$};
|
|
49
49
|
height: 100%;
|
|
50
50
|
background: ${l};
|
|
51
|
-
transform: scaleY(${
|
|
52
|
-
transform-origin: ${
|
|
51
|
+
transform: scaleY(${p === "hidden" ? 0 : 1});
|
|
52
|
+
transform-origin: ${y === "left" ? "top" : "bottom"} center;
|
|
53
53
|
will-change: transform;
|
|
54
54
|
`;
|
|
55
55
|
}
|
|
56
|
-
|
|
56
|
+
u.push(f), g.appendChild(f);
|
|
57
57
|
}
|
|
58
|
-
return e.appendChild(
|
|
58
|
+
return e.appendChild(g), { container: g, blinds: u };
|
|
59
59
|
};
|
|
60
60
|
return {
|
|
61
61
|
out: () => {
|
|
62
62
|
let e = null;
|
|
63
|
-
i = new Promise((
|
|
64
|
-
c =
|
|
63
|
+
i = new Promise((h) => {
|
|
64
|
+
c = h;
|
|
65
65
|
});
|
|
66
|
-
const
|
|
67
|
-
const
|
|
66
|
+
const p = (h) => {
|
|
67
|
+
const g = 1 - h;
|
|
68
68
|
return {
|
|
69
|
-
transform: s === "horizontal" ? `scaleX(${
|
|
69
|
+
transform: s === "horizontal" ? `scaleX(${g})` : `scaleY(${g})`
|
|
70
70
|
};
|
|
71
71
|
};
|
|
72
72
|
return {
|
|
73
|
-
springs: Array.from({ length: r }, (
|
|
73
|
+
springs: Array.from({ length: r }, (h, g) => ({
|
|
74
74
|
spring: a,
|
|
75
75
|
offset: 0.2,
|
|
76
76
|
css: {
|
|
77
77
|
// Use getter for lazy element access (evaluated after prepare)
|
|
78
78
|
get element() {
|
|
79
|
-
return e == null ? void 0 : e.blinds[
|
|
79
|
+
return e == null ? void 0 : e.blinds[g];
|
|
80
80
|
},
|
|
81
|
-
style:
|
|
81
|
+
style: p
|
|
82
82
|
}
|
|
83
83
|
})),
|
|
84
84
|
schedule: "stagger",
|
|
85
|
-
prepare: (
|
|
86
|
-
x(
|
|
85
|
+
prepare: (h) => {
|
|
86
|
+
x(h), h.style.zIndex = "1000", e = o(h, "hidden", "left");
|
|
87
87
|
},
|
|
88
88
|
onStart: () => {
|
|
89
89
|
},
|
|
@@ -94,27 +94,27 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
94
94
|
},
|
|
95
95
|
in: () => {
|
|
96
96
|
let e = null;
|
|
97
|
-
const
|
|
98
|
-
const
|
|
97
|
+
const p = (h) => {
|
|
98
|
+
const g = 1 - h;
|
|
99
99
|
return {
|
|
100
|
-
transform: s === "horizontal" ? `scaleX(${
|
|
100
|
+
transform: s === "horizontal" ? `scaleX(${g})` : `scaleY(${g})`
|
|
101
101
|
};
|
|
102
102
|
};
|
|
103
103
|
return {
|
|
104
|
-
springs: Array.from({ length: r }, (
|
|
104
|
+
springs: Array.from({ length: r }, (h, g) => ({
|
|
105
105
|
spring: n,
|
|
106
106
|
offset: 0.2,
|
|
107
107
|
css: {
|
|
108
108
|
// Use getter for lazy element access (evaluated after prepare)
|
|
109
109
|
get element() {
|
|
110
|
-
return e == null ? void 0 : e.blinds[
|
|
110
|
+
return e == null ? void 0 : e.blinds[g];
|
|
111
111
|
},
|
|
112
|
-
style:
|
|
112
|
+
style: p
|
|
113
113
|
}
|
|
114
114
|
})),
|
|
115
115
|
schedule: "stagger",
|
|
116
|
-
prepare: (
|
|
117
|
-
|
|
116
|
+
prepare: (h) => {
|
|
117
|
+
h.style.position = "relative", h.style.zIndex = "0", e = o(h, "closed", "right");
|
|
118
118
|
},
|
|
119
119
|
onStart: () => {
|
|
120
120
|
},
|
|
@@ -259,10 +259,10 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
259
259
|
}), e = {
|
|
260
260
|
scale: 1,
|
|
261
261
|
translateY: -i.top
|
|
262
|
-
},
|
|
262
|
+
}, p = () => {
|
|
263
263
|
s.style.transform = `translateY(${e.translateY}px) scale(${e.scale})`;
|
|
264
|
-
const
|
|
265
|
-
it(o,
|
|
264
|
+
const y = (i.width - i.width * e.scale) / 2, h = (i.height - i.height * e.scale) / 2;
|
|
265
|
+
it(o, y, h);
|
|
266
266
|
};
|
|
267
267
|
return {
|
|
268
268
|
springs: [
|
|
@@ -270,40 +270,40 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
|
|
|
270
270
|
{
|
|
271
271
|
spring: n.scaleDown,
|
|
272
272
|
offset: E.scaleDown,
|
|
273
|
-
tick: (
|
|
274
|
-
const
|
|
275
|
-
e.scale = 1 - (1 - a) *
|
|
273
|
+
tick: (y) => {
|
|
274
|
+
const h = 1 - y;
|
|
275
|
+
e.scale = 1 - (1 - a) * h, p();
|
|
276
276
|
}
|
|
277
277
|
},
|
|
278
278
|
// Spring 2: Translate (vertical movement)
|
|
279
279
|
{
|
|
280
280
|
spring: n.translate,
|
|
281
281
|
offset: E.translate,
|
|
282
|
-
tick: (
|
|
283
|
-
const
|
|
284
|
-
e.translateY = -i.top - i.height *
|
|
282
|
+
tick: (y) => {
|
|
283
|
+
const h = 1 - y;
|
|
284
|
+
e.translateY = -i.top - i.height * h, p();
|
|
285
285
|
}
|
|
286
286
|
},
|
|
287
287
|
// Spring 3: Scale Up (scale → 1)
|
|
288
288
|
{
|
|
289
289
|
spring: n.scaleUp,
|
|
290
290
|
offset: E.scaleUp,
|
|
291
|
-
tick: (
|
|
292
|
-
const
|
|
293
|
-
e.scale = a + (1 - a) *
|
|
291
|
+
tick: (y) => {
|
|
292
|
+
const h = 1 - y;
|
|
293
|
+
e.scale = a + (1 - a) * h, p();
|
|
294
294
|
}
|
|
295
295
|
}
|
|
296
296
|
],
|
|
297
297
|
schedule: "stagger",
|
|
298
298
|
prepare: () => {
|
|
299
299
|
x(s), k(s, i), S(s, i), at(s, i);
|
|
300
|
-
for (const
|
|
301
|
-
l.positionedParent.appendChild(
|
|
300
|
+
for (const y of o)
|
|
301
|
+
l.positionedParent.appendChild(y);
|
|
302
302
|
},
|
|
303
303
|
onEnd: () => {
|
|
304
304
|
s.style.clipPath = "", s.style.transformOrigin = "", setTimeout(() => {
|
|
305
|
-
for (const
|
|
306
|
-
l.positionedParent.removeChild(
|
|
305
|
+
for (const y of o)
|
|
306
|
+
l.positionedParent.removeChild(y);
|
|
307
307
|
}, 1e3);
|
|
308
308
|
}
|
|
309
309
|
};
|
|
@@ -372,22 +372,22 @@ function st(t = "white", n) {
|
|
|
372
372
|
o.style.position = "absolute", o.style.width = "1px", o.style.height = "15px", o.style.backgroundColor = t, o.style.top = "0", o.style.right = "0", i.appendChild(c), i.appendChild(o);
|
|
373
373
|
const e = document.createElement("div");
|
|
374
374
|
e.style.position = "fixed", e.style.pointerEvents = "none", e.style.zIndex = "9999", e.style.top = `${n.top + n.height - 15 + 1}px`, e.style.left = `${n.left - 1}px`, e.style.width = "15px", e.style.height = "15px";
|
|
375
|
-
const h = document.createElement("div");
|
|
376
|
-
h.style.position = "absolute", h.style.width = "15px", h.style.height = "1px", h.style.backgroundColor = t, h.style.bottom = "0", h.style.left = "0";
|
|
377
|
-
const u = document.createElement("div");
|
|
378
|
-
u.style.position = "absolute", u.style.width = "1px", u.style.height = "15px", u.style.backgroundColor = t, u.style.bottom = "0", u.style.left = "0", e.appendChild(h), e.appendChild(u);
|
|
379
375
|
const p = document.createElement("div");
|
|
380
|
-
p.style.position = "
|
|
376
|
+
p.style.position = "absolute", p.style.width = "15px", p.style.height = "1px", p.style.backgroundColor = t, p.style.bottom = "0", p.style.left = "0";
|
|
381
377
|
const y = document.createElement("div");
|
|
382
|
-
y.style.position = "absolute", y.style.width = "
|
|
378
|
+
y.style.position = "absolute", y.style.width = "1px", y.style.height = "15px", y.style.backgroundColor = t, y.style.bottom = "0", y.style.left = "0", e.appendChild(p), e.appendChild(y);
|
|
379
|
+
const h = document.createElement("div");
|
|
380
|
+
h.style.position = "fixed", h.style.pointerEvents = "none", h.style.zIndex = "9999", h.style.top = `${n.top + n.height - 15 + 1}px`, h.style.left = `${n.left + n.width - 15 + 1}px`, h.style.width = "15px", h.style.height = "15px";
|
|
383
381
|
const g = document.createElement("div");
|
|
384
|
-
|
|
382
|
+
g.style.position = "absolute", g.style.width = "15px", g.style.height = "1px", g.style.backgroundColor = t, g.style.bottom = "0", g.style.right = "0";
|
|
383
|
+
const u = document.createElement("div");
|
|
384
|
+
return u.style.position = "absolute", u.style.width = "1px", u.style.height = "15px", u.style.backgroundColor = t, u.style.bottom = "0", u.style.right = "0", h.appendChild(g), h.appendChild(u), {
|
|
385
385
|
topLeft: r,
|
|
386
386
|
topRight: i,
|
|
387
387
|
bottomLeft: e,
|
|
388
|
-
bottomRight:
|
|
388
|
+
bottomRight: h,
|
|
389
389
|
*[Symbol.iterator]() {
|
|
390
|
-
yield r, yield i, yield e, yield
|
|
390
|
+
yield r, yield i, yield e, yield h;
|
|
391
391
|
}
|
|
392
392
|
};
|
|
393
393
|
}
|
|
@@ -427,17 +427,17 @@ const Dt = (t = {}) => {
|
|
|
427
427
|
let r = null, s = null;
|
|
428
428
|
return {
|
|
429
429
|
in: async (c, o) => {
|
|
430
|
-
const e = c,
|
|
431
|
-
if (
|
|
430
|
+
const e = c, p = Array.from(e.querySelectorAll("[data-hero-key]"));
|
|
431
|
+
if (p.length === 0)
|
|
432
432
|
return {
|
|
433
433
|
spring: n,
|
|
434
434
|
tick: () => {
|
|
435
435
|
}
|
|
436
436
|
// No hero elements, skip animation
|
|
437
437
|
};
|
|
438
|
-
if (!await new Promise((
|
|
439
|
-
r ?
|
|
440
|
-
s = null,
|
|
438
|
+
if (!await new Promise((g) => {
|
|
439
|
+
r ? g(!0) : (s = g, setTimeout(() => {
|
|
440
|
+
s = null, g(!1);
|
|
441
441
|
}, a));
|
|
442
442
|
}) || !r)
|
|
443
443
|
return r = null, {
|
|
@@ -446,12 +446,12 @@ const Dt = (t = {}) => {
|
|
|
446
446
|
}
|
|
447
447
|
// No fromNode, skip animation
|
|
448
448
|
};
|
|
449
|
-
const
|
|
450
|
-
const
|
|
451
|
-
if (!
|
|
452
|
-
const m = rt(r,
|
|
449
|
+
const h = p.map((g) => {
|
|
450
|
+
const u = g.getAttribute("data-hero-key");
|
|
451
|
+
if (!u) return null;
|
|
452
|
+
const m = rt(r, u);
|
|
453
453
|
if (!m) return null;
|
|
454
|
-
const f =
|
|
454
|
+
const f = g, w = b(r, m), $ = b(e, f), v = w.left - $.left - o.scrollOffset.x, F = w.top - $.top - o.scrollOffset.y, Y = w.width / $.width, U = w.height / $.height, V = f.style.transform, W = f.style.position, z = f.style.transformOrigin, X = f.style.zIndex, M = f.style.willChange;
|
|
455
455
|
return {
|
|
456
456
|
toEl: f,
|
|
457
457
|
dx: v,
|
|
@@ -465,37 +465,37 @@ const Dt = (t = {}) => {
|
|
|
465
465
|
originalWillChange: M
|
|
466
466
|
};
|
|
467
467
|
}).filter(
|
|
468
|
-
(
|
|
468
|
+
(g) => g !== null && Math.abs(g.dy) <= d
|
|
469
469
|
);
|
|
470
|
-
return r = null,
|
|
470
|
+
return r = null, h.length === 0 ? {
|
|
471
471
|
spring: n,
|
|
472
472
|
tick: () => {
|
|
473
473
|
}
|
|
474
474
|
// No matching hero elements
|
|
475
475
|
} : {
|
|
476
|
-
springs:
|
|
476
|
+
springs: h.map(({ toEl: g, dx: u, dy: m, dw: f, dh: w }) => ({
|
|
477
477
|
spring: n,
|
|
478
478
|
tick: ($) => {
|
|
479
|
-
|
|
479
|
+
g.style.transform = `translate(${(1 - $) * u}px, ${(1 - $) * m}px) scale(${$ + (1 - $) * f}, ${$ + (1 - $) * w})`;
|
|
480
480
|
}
|
|
481
481
|
})),
|
|
482
482
|
schedule: "parallel",
|
|
483
483
|
prepare: () => {
|
|
484
|
-
|
|
485
|
-
|
|
484
|
+
h.forEach(({ toEl: g }) => {
|
|
485
|
+
g.style.position = "relative", g.style.transformOrigin = "top left", g.style.zIndex = "1000", g.style.willChange = "transform";
|
|
486
486
|
});
|
|
487
487
|
},
|
|
488
488
|
onEnd: () => {
|
|
489
|
-
|
|
489
|
+
h.forEach(
|
|
490
490
|
({
|
|
491
|
-
toEl:
|
|
492
|
-
originalTransform:
|
|
491
|
+
toEl: g,
|
|
492
|
+
originalTransform: u,
|
|
493
493
|
originalPosition: m,
|
|
494
494
|
originalTransformOrigin: f,
|
|
495
495
|
originalZIndex: w,
|
|
496
496
|
originalWillChange: $
|
|
497
497
|
}) => {
|
|
498
|
-
|
|
498
|
+
g.style.transform = u, g.style.position = m, g.style.transformOrigin = f, g.style.zIndex = w, g.style.willChange = $;
|
|
499
499
|
}
|
|
500
500
|
);
|
|
501
501
|
}
|
|
@@ -520,14 +520,14 @@ function lt({
|
|
|
520
520
|
pageRect: a,
|
|
521
521
|
scrollOffset: d
|
|
522
522
|
}) {
|
|
523
|
-
const r = n.left - t.left + (n.width - t.width) / 2 - d.x, s = n.top - t.top + (n.height - t.height) / 2 - d.y, l = n.width / t.width, i = n.height / t.height, c = Math.max(l, i), o = t.top / a.height * 100, e = (a.width - (t.left + t.width)) / a.width * 100,
|
|
523
|
+
const r = n.left - t.left + (n.width - t.width) / 2 - d.x, s = n.top - t.top + (n.height - t.height) / 2 - d.y, l = n.width / t.width, i = n.height / t.height, c = Math.max(l, i), o = t.top / a.height * 100, e = (a.width - (t.left + t.width)) / a.width * 100, p = (a.height - (t.top + t.height)) / a.height * 100, y = t.left / a.width * 100;
|
|
524
524
|
return {
|
|
525
525
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
526
|
-
animate: (
|
|
527
|
-
const
|
|
526
|
+
animate: (g) => {
|
|
527
|
+
const u = 1 - g;
|
|
528
528
|
return {
|
|
529
|
-
clipPath: `inset(${o *
|
|
530
|
-
transform: `translate(${r *
|
|
529
|
+
clipPath: `inset(${o * u}% ${e * u}% ${p * u}% ${y * u}%)`,
|
|
530
|
+
transform: `translate(${r * u}px, ${s * u}px) scale(${1 + (c - 1) * u})`
|
|
531
531
|
};
|
|
532
532
|
}
|
|
533
533
|
};
|
|
@@ -538,14 +538,14 @@ function ot({
|
|
|
538
538
|
pageRect: a,
|
|
539
539
|
scrollOffset: d
|
|
540
540
|
}) {
|
|
541
|
-
const r = n.left - t.left + (n.width - t.width) / 2 + d.x, s = n.top - t.top + (n.height - t.height) / 2 + d.y, l = n.width / t.width, i = n.height / t.height, c = Math.min(l, i), o = t.top / a.height * 100, e = (a.width - (t.left + t.width)) / a.width * 100,
|
|
541
|
+
const r = n.left - t.left + (n.width - t.width) / 2 + d.x, s = n.top - t.top + (n.height - t.height) / 2 + d.y, l = n.width / t.width, i = n.height / t.height, c = Math.min(l, i), o = t.top / a.height * 100, e = (a.width - (t.left + t.width)) / a.width * 100, p = (a.height - (t.top + t.height)) / a.height * 100, y = t.left / a.width * 100;
|
|
542
542
|
return {
|
|
543
543
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
544
|
-
animate: (
|
|
545
|
-
const
|
|
544
|
+
animate: (g) => {
|
|
545
|
+
const u = 1 - g;
|
|
546
546
|
return {
|
|
547
|
-
clipPath: `inset(${o *
|
|
548
|
-
transform: `translate(${r *
|
|
547
|
+
clipPath: `inset(${o * u}% ${e * u}% ${p * u}% ${y * u}%)`,
|
|
548
|
+
transform: `translate(${r * u - d.x}px, ${s * u - d.y}px) scale(${1 + (c - 1) * u})`
|
|
549
549
|
};
|
|
550
550
|
}
|
|
551
551
|
};
|
|
@@ -612,35 +612,35 @@ const Pt = (t = {}) => {
|
|
|
612
612
|
let d = null, r = null, s = null, l = null;
|
|
613
613
|
return {
|
|
614
614
|
in: async (o, { scrollOffset: e }) => {
|
|
615
|
-
const
|
|
616
|
-
return !await new Promise((
|
|
617
|
-
d ?
|
|
618
|
-
r = null,
|
|
615
|
+
const p = o;
|
|
616
|
+
return !await new Promise((h) => {
|
|
617
|
+
d ? h(!0) : (r = h, setTimeout(() => {
|
|
618
|
+
r = null, h(!1);
|
|
619
619
|
}, a));
|
|
620
620
|
}) || !d ? (l == null || l(), l = null, d = null, {
|
|
621
621
|
spring: n,
|
|
622
622
|
css: () => ({})
|
|
623
|
-
}) : (s = ct(d,
|
|
623
|
+
}) : (s = ct(d, p, e), l == null || l(), l = null, s ? (d = null, {
|
|
624
624
|
spring: n,
|
|
625
|
-
css: (
|
|
625
|
+
css: (h) => s != null && s.inAnimation ? s.inAnimation(h) : {}
|
|
626
626
|
}) : (d = null, {
|
|
627
627
|
spring: n,
|
|
628
628
|
css: () => ({})
|
|
629
629
|
}));
|
|
630
630
|
},
|
|
631
|
-
out: async (o) => {
|
|
632
|
-
const
|
|
633
|
-
l =
|
|
631
|
+
out: async (o, e) => {
|
|
632
|
+
const p = new Promise((y) => {
|
|
633
|
+
l = y;
|
|
634
634
|
});
|
|
635
635
|
return {
|
|
636
636
|
spring: n,
|
|
637
|
-
prepare: (
|
|
638
|
-
|
|
637
|
+
prepare: (y) => {
|
|
638
|
+
s != null && s.isEnterMode ? x(y) : (x(y, e), y.style.zIndex = "-1");
|
|
639
639
|
},
|
|
640
640
|
wait: async () => {
|
|
641
|
-
d = o, r && (r(!0), r = null), await
|
|
641
|
+
d = o, r && (r(!0), r = null), await p;
|
|
642
642
|
},
|
|
643
|
-
css: (
|
|
643
|
+
css: (y) => s != null && s.outAnimation ? s.outAnimation(y) : {}
|
|
644
644
|
};
|
|
645
645
|
}
|
|
646
646
|
};
|
|
@@ -651,14 +651,14 @@ function dt({
|
|
|
651
651
|
pageRect: a,
|
|
652
652
|
scrollOffset: d
|
|
653
653
|
}) {
|
|
654
|
-
const r = n.left - t.left + (n.width - t.width) / 2 - d.x, s = n.top - t.top + (n.height - t.height) / 2 - d.y, l = n.width / t.width, i = n.height / t.height, c = Math.max(l, i), o = t.top / a.height * 100, e = (a.width - (t.left + t.width)) / a.width * 100,
|
|
654
|
+
const r = n.left - t.left + (n.width - t.width) / 2 - d.x, s = n.top - t.top + (n.height - t.height) / 2 - d.y, l = n.width / t.width, i = n.height / t.height, c = Math.max(l, i), o = t.top / a.height * 100, e = (a.width - (t.left + t.width)) / a.width * 100, p = (a.height - (t.top + t.height)) / a.height * 100, y = t.left / a.width * 100;
|
|
655
655
|
return {
|
|
656
656
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
657
|
-
animate: (
|
|
658
|
-
const
|
|
657
|
+
animate: (g) => {
|
|
658
|
+
const u = 1 - g;
|
|
659
659
|
return {
|
|
660
|
-
clipPath: `inset(${o *
|
|
661
|
-
transform: `translate(${r *
|
|
660
|
+
clipPath: `inset(${o * u}% ${e * u}% ${p * u}% ${y * u}%)`,
|
|
661
|
+
transform: `translate(${r * u}px, ${s * u}px) scale(${1 + (c - 1) * u})`
|
|
662
662
|
};
|
|
663
663
|
}
|
|
664
664
|
};
|
|
@@ -689,10 +689,10 @@ function pt({
|
|
|
689
689
|
return {
|
|
690
690
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
691
691
|
animate: (o) => {
|
|
692
|
-
const e = 1 - o,
|
|
692
|
+
const e = 1 - o, p = o;
|
|
693
693
|
return {
|
|
694
694
|
transform: `translate(${d * e}px, ${r * e}px) scale(${1 + (i - 1) * e})`,
|
|
695
|
-
opacity: `${
|
|
695
|
+
opacity: `${p}`
|
|
696
696
|
};
|
|
697
697
|
}
|
|
698
698
|
};
|
|
@@ -703,14 +703,14 @@ function yt({
|
|
|
703
703
|
pageRect: a,
|
|
704
704
|
scrollOffset: d
|
|
705
705
|
}) {
|
|
706
|
-
const r = n.left - t.left + (n.width - t.width) / 2 + d.x, s = n.top - t.top + (n.height - t.height) / 2 + d.y, l = n.width / t.width, i = n.height / t.height, c = Math.min(l, i), o = t.top / a.height * 100, e = (a.width - (t.left + t.width)) / a.width * 100,
|
|
706
|
+
const r = n.left - t.left + (n.width - t.width) / 2 + d.x, s = n.top - t.top + (n.height - t.height) / 2 + d.y, l = n.width / t.width, i = n.height / t.height, c = Math.min(l, i), o = t.top / a.height * 100, e = (a.width - (t.left + t.width)) / a.width * 100, p = (a.height - (t.top + t.height)) / a.height * 100, y = t.left / a.width * 100;
|
|
707
707
|
return {
|
|
708
708
|
transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
|
|
709
|
-
animate: (
|
|
710
|
-
const
|
|
709
|
+
animate: (g) => {
|
|
710
|
+
const u = 1 - g;
|
|
711
711
|
return {
|
|
712
|
-
clipPath: `inset(${o *
|
|
713
|
-
transform: `translate(${r *
|
|
712
|
+
clipPath: `inset(${o * u}% ${e * u}% ${p * u}% ${y * u}%)`,
|
|
713
|
+
transform: `translate(${r * u - d.x}px, ${s * u - d.y}px) scale(${1 + (c - 1) * u})`
|
|
714
714
|
};
|
|
715
715
|
}
|
|
716
716
|
};
|
|
@@ -748,29 +748,29 @@ function gt(t, n, a) {
|
|
|
748
748
|
galleryRect: c,
|
|
749
749
|
pageRect: n.getBoundingClientRect(),
|
|
750
750
|
scrollOffset: a
|
|
751
|
-
}),
|
|
751
|
+
}), p = ht({
|
|
752
752
|
galleryRect: c,
|
|
753
753
|
detailRect: o,
|
|
754
754
|
scrollOffset: a
|
|
755
755
|
});
|
|
756
|
-
return n.style.transformOrigin = e.transformOrigin, t.style.transformOrigin =
|
|
756
|
+
return n.style.transformOrigin = e.transformOrigin, t.style.transformOrigin = p.transformOrigin, {
|
|
757
757
|
inAnimation: e.animate,
|
|
758
|
-
outAnimation:
|
|
758
|
+
outAnimation: p.animate
|
|
759
759
|
};
|
|
760
760
|
} else {
|
|
761
761
|
const e = pt({
|
|
762
762
|
galleryRect: c,
|
|
763
763
|
detailRect: o,
|
|
764
764
|
scrollOffset: a
|
|
765
|
-
}),
|
|
765
|
+
}), p = yt({
|
|
766
766
|
detailRect: o,
|
|
767
767
|
galleryRect: c,
|
|
768
768
|
pageRect: t.getBoundingClientRect(),
|
|
769
769
|
scrollOffset: a
|
|
770
770
|
});
|
|
771
|
-
return n.style.transformOrigin = e.transformOrigin, t.style.transformOrigin =
|
|
771
|
+
return n.style.transformOrigin = e.transformOrigin, t.style.transformOrigin = p.transformOrigin, {
|
|
772
772
|
inAnimation: e.animate,
|
|
773
|
-
outAnimation:
|
|
773
|
+
outAnimation: p.animate
|
|
774
774
|
};
|
|
775
775
|
}
|
|
776
776
|
}
|
|
@@ -783,35 +783,35 @@ const vt = (t = {}) => {
|
|
|
783
783
|
let d = null, r = null, s = null, l = null;
|
|
784
784
|
return {
|
|
785
785
|
in: async (o, { scrollOffset: e }) => {
|
|
786
|
-
const
|
|
787
|
-
return !await new Promise((
|
|
788
|
-
d ?
|
|
789
|
-
r = null,
|
|
786
|
+
const p = o;
|
|
787
|
+
return !await new Promise((h) => {
|
|
788
|
+
d ? h(!0) : (r = h, setTimeout(() => {
|
|
789
|
+
r = null, h(!1);
|
|
790
790
|
}, a));
|
|
791
791
|
}) || !d ? (l == null || l(), l = null, d = null, {
|
|
792
792
|
spring: n,
|
|
793
793
|
css: () => ({})
|
|
794
|
-
}) : (s = gt(d,
|
|
794
|
+
}) : (s = gt(d, p, e), l == null || l(), l = null, s ? (d = null, {
|
|
795
795
|
spring: n,
|
|
796
|
-
css: (
|
|
796
|
+
css: (h) => s ? s.inAnimation(h) : {}
|
|
797
797
|
}) : (d = null, {
|
|
798
798
|
spring: n,
|
|
799
799
|
css: () => ({})
|
|
800
800
|
}));
|
|
801
801
|
},
|
|
802
802
|
out: async (o) => {
|
|
803
|
-
const e = new Promise((
|
|
804
|
-
l =
|
|
803
|
+
const e = new Promise((p) => {
|
|
804
|
+
l = p;
|
|
805
805
|
});
|
|
806
806
|
return {
|
|
807
807
|
spring: n,
|
|
808
|
-
prepare: (
|
|
809
|
-
x(
|
|
808
|
+
prepare: (p) => {
|
|
809
|
+
x(p), p.style.zIndex = "-1";
|
|
810
810
|
},
|
|
811
811
|
wait: async () => {
|
|
812
812
|
d = o, r && (r(!0), r = null), await e;
|
|
813
813
|
},
|
|
814
|
-
css: (
|
|
814
|
+
css: (p) => s ? s.outAnimation(p) : {}
|
|
815
815
|
};
|
|
816
816
|
}
|
|
817
817
|
};
|
|
@@ -828,8 +828,8 @@ const vt = (t = {}) => {
|
|
|
828
828
|
const i = () => {
|
|
829
829
|
if (r === null || s === null)
|
|
830
830
|
return null;
|
|
831
|
-
const e = Math.min(r, s),
|
|
832
|
-
return Math.max(e,
|
|
831
|
+
const e = Math.min(r, s), p = window.innerHeight;
|
|
832
|
+
return Math.max(e, p);
|
|
833
833
|
};
|
|
834
834
|
return {
|
|
835
835
|
in: (e) => (s = e.offsetHeight, r !== null && (l = i()), {
|
|
@@ -837,27 +837,27 @@ const vt = (t = {}) => {
|
|
|
837
837
|
prepare: () => {
|
|
838
838
|
e.style.willChange = "transform", e.style.backfaceVisibility = "hidden", e.style.contain = "layout paint";
|
|
839
839
|
},
|
|
840
|
-
tick: (
|
|
840
|
+
tick: (p) => {
|
|
841
841
|
l === null && (l = i());
|
|
842
|
-
const
|
|
843
|
-
e.style.transform = `translate3d(0, ${
|
|
842
|
+
const y = l ?? window.innerHeight, h = d ? (1 - p) * y : (1 - p) * -y;
|
|
843
|
+
e.style.transform = `translate3d(0, ${h}px, 0)`;
|
|
844
844
|
},
|
|
845
845
|
onEnd: () => {
|
|
846
846
|
e.style.willChange = "auto", e.style.backfaceVisibility = "", e.style.contain = "";
|
|
847
847
|
}
|
|
848
848
|
}),
|
|
849
|
-
out: (e,
|
|
849
|
+
out: (e, p) => ({
|
|
850
850
|
spring: a,
|
|
851
851
|
onStart: () => {
|
|
852
852
|
r = e.offsetHeight, s !== null && (l = i());
|
|
853
853
|
},
|
|
854
|
-
tick: (
|
|
854
|
+
tick: (y) => {
|
|
855
855
|
l === null && (l = i());
|
|
856
|
-
const
|
|
857
|
-
e.style.transform = `translate3d(0, ${
|
|
856
|
+
const h = l ?? window.innerHeight, g = d ? (1 - y) * -h : (1 - y) * h;
|
|
857
|
+
e.style.transform = `translate3d(0, ${g}px, 0)`;
|
|
858
858
|
},
|
|
859
|
-
prepare: (
|
|
860
|
-
x(
|
|
859
|
+
prepare: (y) => {
|
|
860
|
+
x(y, p), y.style.zIndex = d ? "-1" : "1", y.style.willChange = "transform", y.style.backfaceVisibility = "hidden", y.style.contain = "layout paint", y.style.pointerEvents = "none";
|
|
861
861
|
}
|
|
862
862
|
})
|
|
863
863
|
};
|
|
@@ -994,8 +994,8 @@ const Tt = (t) => t.reduce((n, a) => n + a, 0), Vt = (t = {}) => {
|
|
|
994
994
|
x(e, c), e.style.opacity = "1";
|
|
995
995
|
},
|
|
996
996
|
tick: (e) => {
|
|
997
|
-
const
|
|
998
|
-
i.style.opacity = String(
|
|
997
|
+
const p = Math.max(0, e - Ct);
|
|
998
|
+
i.style.opacity = String(p);
|
|
999
999
|
},
|
|
1000
1000
|
onEnd: () => {
|
|
1001
1001
|
i.style.opacity = o;
|
|
@@ -1004,16 +1004,16 @@ const Tt = (t) => t.reduce((n, a) => n + a, 0), Vt = (t = {}) => {
|
|
|
1004
1004
|
},
|
|
1005
1005
|
in: (i) => {
|
|
1006
1006
|
let c = null, o = null, e = null;
|
|
1007
|
-
const
|
|
1007
|
+
const p = document.body.style.overflow, y = document.getElementById(
|
|
1008
1008
|
D
|
|
1009
1009
|
);
|
|
1010
|
-
let
|
|
1011
|
-
const
|
|
1012
|
-
c = document.createElement("div"), c.id = D, Object.assign(c.style, wt, { background: n }), document.body.appendChild(c), o = document.createElement("div"), Object.assign(o.style, xt), c.appendChild(o), e = document.createElement("div"), Object.assign(e.style, bt), o.appendChild(e), a.forEach((
|
|
1010
|
+
let h = [];
|
|
1011
|
+
const g = () => {
|
|
1012
|
+
c = document.createElement("div"), c.id = D, Object.assign(c.style, wt, { background: n }), document.body.appendChild(c), o = document.createElement("div"), Object.assign(o.style, xt), c.appendChild(o), e = document.createElement("div"), Object.assign(e.style, bt), o.appendChild(e), a.forEach((u) => {
|
|
1013
1013
|
const m = document.createElement("div");
|
|
1014
|
-
m.textContent =
|
|
1015
|
-
}),
|
|
1016
|
-
(
|
|
1014
|
+
m.textContent = u, Object.assign(m.style, Et, l), e.appendChild(m);
|
|
1015
|
+
}), h = Array.from(e.children).map(
|
|
1016
|
+
(u) => u.getBoundingClientRect().width
|
|
1017
1017
|
);
|
|
1018
1018
|
};
|
|
1019
1019
|
return {
|
|
@@ -1021,28 +1021,28 @@ const Tt = (t) => t.reduce((n, a) => n + a, 0), Vt = (t = {}) => {
|
|
|
1021
1021
|
from: 0,
|
|
1022
1022
|
to: 1,
|
|
1023
1023
|
prepare: () => {
|
|
1024
|
-
document.body.style.overflow = "hidden", i.style.opacity = "1",
|
|
1024
|
+
document.body.style.overflow = "hidden", i.style.opacity = "1", y == null || y.remove(), g(), c && o && (c.style.clipPath = "none", o.style.transform = "scale(1)");
|
|
1025
1025
|
},
|
|
1026
|
-
tick: (
|
|
1026
|
+
tick: (u) => {
|
|
1027
1027
|
if (!(!c || !o || !e)) {
|
|
1028
|
-
if (
|
|
1029
|
-
const m =
|
|
1028
|
+
if (u <= A && a.length > 0) {
|
|
1029
|
+
const m = u / A, f = Math.min(
|
|
1030
1030
|
Math.floor(m * a.length),
|
|
1031
1031
|
a.length - 1
|
|
1032
|
-
), w =
|
|
1032
|
+
), w = h[f] ?? 0, $ = Tt(h.slice(0, f));
|
|
1033
1033
|
o.style.width = `${w}px`, e.style.transform = `translateX(-${$}px)`;
|
|
1034
1034
|
}
|
|
1035
|
-
if (
|
|
1035
|
+
if (u > A) {
|
|
1036
1036
|
const f = 1 - Math.max(
|
|
1037
1037
|
0,
|
|
1038
|
-
Math.min(1, (
|
|
1038
|
+
Math.min(1, (u - A) / At)
|
|
1039
1039
|
);
|
|
1040
1040
|
c.style.clipPath = Lt(d, f), o.style.transform = `scale(${f})`;
|
|
1041
1041
|
}
|
|
1042
1042
|
}
|
|
1043
1043
|
},
|
|
1044
1044
|
onEnd: () => {
|
|
1045
|
-
c == null || c.remove(), c = o = e = null, document.body.style.overflow =
|
|
1045
|
+
c == null || c.remove(), c = o = e = null, document.body.style.overflow = p;
|
|
1046
1046
|
}
|
|
1047
1047
|
};
|
|
1048
1048
|
}
|