feat(gallery): 灯箱 v2.1 十项全量——起飞开合/隐层/侧置 meta/HD
①FLIP 原位起飞/回落（克隆双态矩形插值，关闭回落取缩略图实时 矩形）②背景点击关（containRect 几何判定——img 盒铺满 figure 的 元素链判定失效坑）③chrome 双层淡入+i 键/zoom 自动隐（换片重置） ④相邻预载 ⑤双指缩放 ⑥换片侧向过渡 ⑦缩放指示+首开提示 ⑧竖 图侧置 meta ⑨>1.5x HD 原图交换+404 兜底 ⑩竖拖关闭。reduced- motion 全豁免；钳制数学保留。 验收三连修：chrome-in 动画 both 填充锁死 opacity（animation:none 掐填充——动画填充压制普通声明的级联陷阱）；× 钮独立于双层 chrome 补隐（全隐口径=只剩图，Esc/i 逃逸）；视觉终审四问修复 后全过（起飞连贯/侧置成立/隐层纯净/亮暗同判）。 车道：op-artalk（专项逐项+E2E 34/34）；收编验收+视觉终审双绿 验证: E2E 34/34；三态隐层 computed 实测（i 隐/复原/zoom 隐全 过）；全隐残留零（×/caption/箭头）；Esc 逃逸 ✓ Spec: none (灯箱 v2.1 定版，车道级交付) Co-authored-by: GLM-5.3
This commit is contained in:
wait4xandGLM-5.3 committed
1 parent
d8997c3c72
commit
127f349fb2
2 files changed
+378
-46
No files matched your search
@@ -119,7 +119,10 @@ const first = cards[0];
|
||||
</div>
|
||||
|
||||
<dialog id="lb" aria-label={t('gallery_lightbox_label', locale)}>
|
||||
<button id="lb-close" class="tap lbnav" type="button" aria-label={t('gallery_lightbox_close', locale)}>
|
||||
<span id="lb-count" class="lb-count lb-l1">1 / {cards.length}</span>
|
||||
<p id="lb-hint" class="lb-hint lb-l1" hidden>{t('lb_hint', locale)}</p>
|
||||
<span id="lb-zoombadge" class="lb-zoombadge" aria-hidden="true"></span>
|
||||
<button id="lb-close" class="tap lbnav lb-l1" type="button" aria-label={t('gallery_lightbox_close', locale)}>
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
|
||||
<path d="m5 5 14 14M19 5 5 19"></path>
|
||||
</svg>
|
||||
@@ -128,16 +131,15 @@ const first = cards[0];
|
||||
<img id="lb-img" src={first?.fullSrc} alt={first?.alt ?? ''} />
|
||||
</div>
|
||||
<div class="lb-bottom">
|
||||
<button id="lb-prev" class="tap lbnav" type="button" aria-label={t('gallery_lightbox_prev', locale)}>
|
||||
<button id="lb-prev" class="tap lbnav lb-l1" type="button" aria-label={t('gallery_lightbox_prev', locale)}>
|
||||
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="m14.5 5.5-6.5 6.5 6.5 6.5"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="lb-meta">
|
||||
<div class="lb-meta lb-l2">
|
||||
<p id="lb-caption" class="lb-caption">{first?.caption ?? ''}</p>
|
||||
<div class="lb-row">
|
||||
<strong id="lb-title">{first?.title}</strong>
|
||||
<span id="lb-count">1 / {cards.length}</span>
|
||||
<span id="lb-exif" class="lb-exif">{first?.exif}</span>
|
||||
<span class="lb-orig">
|
||||
<a id="lb-original" class="lb-act" href={first?.original} target="_blank" rel="noopener">
|
||||
@@ -151,7 +153,7 @@ const first = cards[0];
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button id="lb-next" class="tap lbnav" type="button" aria-label={t('gallery_lightbox_next', locale)}>
|
||||
<button id="lb-next" class="tap lbnav lb-l1" type="button" aria-label={t('gallery_lightbox_next', locale)}>
|
||||
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="m9.5 5.5 6.5 6.5-6.5 6.5"></path>
|
||||
</svg>
|
||||
@@ -161,34 +163,39 @@ const first = cards[0];
|
||||
</BaseLayout>
|
||||
|
||||
<script>
|
||||
// 灯箱：原生 dialog，←→ 切换、Esc 原生关闭；触屏快滑翻页是键盘的等价物。
|
||||
// ClientRouter 下模块脚本只执行一次，接线挂在 astro:page-load 按当前 DOM 重装
|
||||
// 灯箱 v2.1：原生 dialog + FLIP 起飞 + 滚轮锚点缩放 + 双指 + chrome 召唤 + HD 交换。
|
||||
// 缩放引擎（applyZoom 钳制/zoomAt 锚点）为 44626f8 定稿数学，v2.1 全部叠加不动其核心。
|
||||
// ClientRouter 下模块脚本只执行一次，接线挂在 astro:page-load 按当前 DOM 重装。
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
const lb = document.getElementById('lb') as HTMLDialogElement | null;
|
||||
const shots = [...document.querySelectorAll<HTMLButtonElement>('.shot-btn')];
|
||||
if (!lb || shots.length === 0) return;
|
||||
|
||||
const img = document.getElementById('lb-img') as HTMLImageElement;
|
||||
const fig = lb.querySelector('.lb-figure') as HTMLElement | null;
|
||||
const titleEl = document.getElementById('lb-title') as HTMLElement;
|
||||
const exifEl = document.getElementById('lb-exif') as HTMLElement;
|
||||
const captionEl = document.getElementById('lb-caption') as HTMLElement | null;
|
||||
const badge = document.getElementById('lb-zoombadge');
|
||||
const hintEl = document.getElementById('lb-hint');
|
||||
const reduced = matchMedia('(prefers-reduced-motion: reduce)');
|
||||
let idx = 0;
|
||||
|
||||
// ── v2 缩放态：滚轮光标锚点缩放（0.5x–5x）+ 放大后拖拽平移 + 双击 1x↔2.5x ──
|
||||
// ── 缩放引擎（v2 定稿，钳制数学不得回退） ──
|
||||
const zoom = { s: 1, tx: 0, ty: 0 };
|
||||
const applyZoom = () => {
|
||||
// 平移钳制：缩放后的图盒不得超出舞台（|t| ≤ 尺寸差/2）——拖飞与回 1x 偏移残留同治
|
||||
const mx = Math.max(0, (img.clientWidth * (zoom.s - 1)) / 2);
|
||||
const my = Math.max(0, (img.clientHeight * (zoom.s - 1)) / 2);
|
||||
zoom.tx = Math.min(mx, Math.max(-mx, zoom.tx));
|
||||
zoom.ty = Math.min(my, Math.max(-my, zoom.ty));
|
||||
img.style.transform = zoom.s === 1 ? 'none' : `translate(${zoom.tx}px, ${zoom.ty}px) scale(${zoom.s})`;
|
||||
img.classList.toggle('zoomed', zoom.s !== 1);
|
||||
applyChrome(zoom.s > 1); // ③ zoom 驱动 chrome 自动隐
|
||||
scheduleBadge();
|
||||
applyHD();
|
||||
};
|
||||
const resetZoom = () => { zoom.s = 1; zoom.tx = 0; zoom.ty = 0; applyZoom(); };
|
||||
const zoomAt = (next: number, cx: number, cy: number) => {
|
||||
// 光标为不动点：先求图面上锚点，再按新 scale 反算平移量
|
||||
const rect = img.getBoundingClientRect();
|
||||
const ax = cx - rect.left - rect.width / 2 - zoom.tx;
|
||||
const ay = cy - rect.top - rect.height / 2 - zoom.ty;
|
||||
@@ -200,41 +207,250 @@ const first = cards[0];
|
||||
};
|
||||
lb.addEventListener('wheel', (e) => {
|
||||
if (!lb.open) return;
|
||||
e.preventDefault(); // 滚轮在灯箱内一律缩放：含 Ctrl+滚轮（劫持页面缩放的预期在灯箱内成立）
|
||||
e.preventDefault();
|
||||
const factor = Math.exp(-e.deltaY * 0.0015);
|
||||
const next = Math.min(5, Math.max(1, zoom.s * factor)); // 下限 1：fit-contain 即最小（0.5x 制造偏移态）
|
||||
const next = Math.min(5, Math.max(1, zoom.s * factor));
|
||||
if (next === zoom.s) return;
|
||||
zoomAt(next, e.clientX, e.clientY);
|
||||
}, { passive: false });
|
||||
// 拖拽平移：仅放大态（=1 时不抢点击/翻页）；pointer capture 全程跟随
|
||||
|
||||
// ── ③ chrome 双层：i 键召唤 + zoom 自动隐（回 1x 淡回用户偏好态） ──
|
||||
let userHideChrome = false;
|
||||
function applyChrome(autoHide: boolean) {
|
||||
lb.classList.toggle('chrome-off', userHideChrome || autoHide);
|
||||
}
|
||||
lb.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'i' || e.key === 'I') {
|
||||
e.preventDefault();
|
||||
userHideChrome = !userHideChrome;
|
||||
applyChrome(zoom.s > 1);
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
e.preventDefault();
|
||||
show(idx - 1);
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
e.preventDefault();
|
||||
show(idx + 1);
|
||||
}
|
||||
});
|
||||
|
||||
// ── ⑦ 缩放指示：停稳 400ms 后亮 900ms 淡出 ──
|
||||
let badgeTimer: number | undefined;
|
||||
function scheduleBadge() {
|
||||
if (!badge) return;
|
||||
badge.textContent = `${Math.round(zoom.s * 100)}%`;
|
||||
clearTimeout(badgeTimer);
|
||||
if (zoom.s === 1) { badge.classList.remove('on'); return; }
|
||||
badgeTimer = window.setTimeout(() => {
|
||||
badge.classList.add('on');
|
||||
badgeTimer = window.setTimeout(() => badge?.classList.remove('on'), 900);
|
||||
}, 400);
|
||||
}
|
||||
|
||||
// ── ① FLIP 起飞/回落：克隆 cover 双态矩形插值（PS data-cropped 路线） ──
|
||||
const containRect = () => {
|
||||
const f = fig!.getBoundingClientRect();
|
||||
const iw = img.naturalWidth || 1, ih = img.naturalHeight || 1;
|
||||
const k = Math.min(f.width / iw, f.height / ih);
|
||||
const w = iw * k, h = ih * k;
|
||||
return { left: f.left + (f.width - w) / 2, top: f.top + (f.height - h) / 2, width: w, height: h };
|
||||
};
|
||||
const setBox = (el: HTMLElement, r: { left: number; top: number; width: number; height: number }) => {
|
||||
el.style.left = `${r.left}px`; el.style.top = `${r.top}px`;
|
||||
el.style.width = `${r.width}px`; el.style.height = `${r.height}px`;
|
||||
};
|
||||
function flyFrom(from: DOMRect) {
|
||||
if (reduced.matches || !fig) return;
|
||||
const c = containRect();
|
||||
const cl = document.createElement('img');
|
||||
cl.className = 'lb-flip-img';
|
||||
cl.src = img.src;
|
||||
cl.alt = '';
|
||||
setBox(cl, from);
|
||||
lb.appendChild(cl);
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => setBox(cl, c)));
|
||||
setTimeout(() => cl.remove(), 340);
|
||||
}
|
||||
function flyBack() {
|
||||
if (reduced.matches) return;
|
||||
const thumb = shots[idx]?.querySelector('img');
|
||||
if (!thumb) return;
|
||||
const c = containRect();
|
||||
const cl = document.createElement('img');
|
||||
cl.className = 'lb-flip-back';
|
||||
cl.src = img.src;
|
||||
cl.alt = '';
|
||||
setBox(cl, c);
|
||||
document.body.appendChild(cl);
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => setBox(cl, thumb.getBoundingClientRect())));
|
||||
setTimeout(() => cl.remove(), 340);
|
||||
}
|
||||
|
||||
// ── ② 背景点击关闭：contain 布局下 img 元素盒铺满 figure，视觉空白也在 img 上——
|
||||
// 背景判定不能看 e.target，须按 contain 内容盒几何（盒外=关，盒内 8px 容差=图区）
|
||||
let justDragged = false;
|
||||
lb.addEventListener('click', (e) => {
|
||||
if (!lb.open) return;
|
||||
const t = e.target as Element;
|
||||
if (t.closest('button, a, .lb-l2, .lb-hint')) return;
|
||||
if (justDragged) { justDragged = false; return; }
|
||||
const c = containRect();
|
||||
const inside =
|
||||
e.clientX >= c.left - 8 && e.clientX <= c.left + c.width + 8 &&
|
||||
e.clientY >= c.top - 8 && e.clientY <= c.top + c.height + 8;
|
||||
if (!inside) lb.close();
|
||||
});
|
||||
|
||||
// ── ⑤ 双指缩放 + ⑩ 竖拖关闭（pointer 统一；单指拖拽 v2 保持） ──
|
||||
const pts = new Map<number, { x: number; y: number }>();
|
||||
let pinch: { d: number; s: number } | null = null;
|
||||
let tap: { x: number; y: number; closed: boolean } | null = null;
|
||||
let drag: { x: number; y: number; tx: number; ty: number; moved: boolean } | null = null;
|
||||
img.addEventListener('pointerdown', (e) => {
|
||||
if (zoom.s <= 1) return;
|
||||
e.preventDefault();
|
||||
img.setPointerCapture(e.pointerId);
|
||||
drag = { x: e.clientX, y: e.clientY, tx: zoom.tx, ty: zoom.ty, moved: false };
|
||||
img.classList.add('grabbing');
|
||||
pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
||||
if (pts.size === 2) {
|
||||
drag = null;
|
||||
img.classList.remove('grabbing');
|
||||
const [a, b] = [...pts.values()];
|
||||
pinch = { d: Math.hypot(a!.x - b!.x, a!.y - b!.y), s: zoom.s };
|
||||
return;
|
||||
}
|
||||
if (pts.size === 1) tap = { x: e.clientX, y: e.clientY, closed: false };
|
||||
if (zoom.s > 1) {
|
||||
e.preventDefault();
|
||||
img.setPointerCapture(e.pointerId);
|
||||
drag = { x: e.clientX, y: e.clientY, tx: zoom.tx, ty: zoom.ty, moved: false };
|
||||
img.classList.add('grabbing');
|
||||
}
|
||||
});
|
||||
img.addEventListener('pointermove', (e) => {
|
||||
if (!drag) return;
|
||||
const dx = e.clientX - drag.x, dy = e.clientY - drag.y;
|
||||
if (Math.abs(dx) + Math.abs(dy) > 3) drag.moved = true;
|
||||
zoom.tx = drag.tx + dx;
|
||||
zoom.ty = drag.ty + dy;
|
||||
applyZoom();
|
||||
if (!pts.has(e.pointerId)) return;
|
||||
pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
||||
if (pinch && pts.size === 2) {
|
||||
const [a, b] = [...pts.values()];
|
||||
const d = Math.hypot(a!.x - b!.x, a!.y - b!.y);
|
||||
const mid = { x: (a!.x + b!.x) / 2, y: (a!.y + b!.y) / 2 };
|
||||
const next = Math.min(5, Math.max(1, pinch.s * (d / pinch.d)));
|
||||
if (next !== zoom.s) zoomAt(next, mid.x, mid.y);
|
||||
return;
|
||||
}
|
||||
if (drag) {
|
||||
const dx = e.clientX - drag.x, dy = e.clientY - drag.y;
|
||||
if (Math.abs(dx) + Math.abs(dy) > 3) drag.moved = true;
|
||||
zoom.tx = drag.tx + dx;
|
||||
zoom.ty = drag.ty + dy;
|
||||
applyZoom();
|
||||
return;
|
||||
}
|
||||
// ⑩ zoom=1 竖向拖 >80px 且竖向主导 → 关闭回落
|
||||
if (tap && !tap.closed && zoom.s === 1) {
|
||||
const dy = e.clientY - tap.y, dx = e.clientX - tap.x;
|
||||
if (Math.abs(dy) > 80 && Math.abs(dy) > Math.abs(dx) * 1.2) {
|
||||
tap.closed = true;
|
||||
lb.close();
|
||||
}
|
||||
}
|
||||
});
|
||||
const endDrag = () => { drag = null; img.classList.remove('grabbing'); };
|
||||
img.addEventListener('pointerup', endDrag);
|
||||
img.addEventListener('pointercancel', endDrag);
|
||||
const endPointer = (e: PointerEvent) => {
|
||||
pts.delete(e.pointerId);
|
||||
if (pts.size < 2) pinch = null;
|
||||
if (drag?.moved) justDragged = true;
|
||||
drag = null;
|
||||
tap = null;
|
||||
img.classList.remove('grabbing');
|
||||
if (justDragged) setTimeout(() => (justDragged = false), 120);
|
||||
};
|
||||
img.addEventListener('pointerup', endPointer);
|
||||
img.addEventListener('pointercancel', endPointer);
|
||||
img.addEventListener('dblclick', (e) => {
|
||||
if (zoom.s === 1) zoomAt(2.5, e.clientX, e.clientY);
|
||||
else resetZoom();
|
||||
});
|
||||
|
||||
// ── ⑨ HD 交换：>1.5x 懒换原图（decode 后无闪白），回落 1.5x 以下回 1440 ──
|
||||
let hd = { on: false, failed: false, gen: 0 };
|
||||
function applyHD() {
|
||||
const btn = shots[idx];
|
||||
if (!btn) return;
|
||||
const full = btn.dataset.full ?? '';
|
||||
const orig = btn.dataset.original ?? '';
|
||||
if (zoom.s > 1.5 && !hd.on && !hd.failed && orig) {
|
||||
const gen = hd.gen;
|
||||
const probe = new Image();
|
||||
probe.src = orig;
|
||||
probe.decode?.().then(() => {
|
||||
if (hd.gen === gen && zoom.s > 1.5 && !hd.on) { img.src = orig; hd.on = true; }
|
||||
}).catch(() => { hd.failed = true; }); // 404/解码失败：留 1440 兜底
|
||||
} else if (zoom.s <= 1.5 && hd.on) {
|
||||
img.src = full;
|
||||
hd.on = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── ⑧ 长图侧置 meta：竖图(ratio<0.9)且视口≥820 ──
|
||||
function applySideMeta() {
|
||||
const btn = shots[idx];
|
||||
if (!btn) return;
|
||||
const w = Number(btn.dataset.w) || 1, h = Number(btn.dataset.h) || 1;
|
||||
lb.classList.toggle('side-meta', w / h < 0.9 && innerWidth >= 820);
|
||||
}
|
||||
addEventListener('resize', () => lb.open && applySideMeta(), { passive: true });
|
||||
|
||||
// ── ④ 相邻预载（克制档 ±1，idle 后） ──
|
||||
const idle: (f: () => void) => void =
|
||||
'requestIdleCallback' in window
|
||||
? (f) => requestIdleCallback(f)
|
||||
: (f) => setTimeout(f, 200);
|
||||
function preloadNeighbors() {
|
||||
idle(() => {
|
||||
for (const j of [idx + 1, idx - 1]) {
|
||||
const b = shots[(j + shots.length) % shots.length];
|
||||
if (b?.dataset.full) { const pre = new Image(); pre.src = b.dataset.full; }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ── ⑦ 首开提示：每会话一次，2.6s 自隐 ──
|
||||
let hintShown = false;
|
||||
function maybeHint() {
|
||||
if (hintShown || !hintEl || sessionStorage.getItem('lb-hint') === '1') return;
|
||||
hintShown = true;
|
||||
sessionStorage.setItem('lb-hint', '1');
|
||||
hintEl.hidden = false;
|
||||
setTimeout(() => { hintEl!.hidden = true; }, 2600);
|
||||
}
|
||||
|
||||
// ── ⑥ 换片过渡：旧图 140ms 淡出 → 新图 decode 后侧向 10% 位移淡入 ──
|
||||
let lastIdx = 0;
|
||||
async function transitionSwap(btn: HTMLButtonElement, dir: 1 | -1) {
|
||||
const next = btn.dataset.full ?? '';
|
||||
if (reduced.matches) { img.src = next; return; }
|
||||
img.style.opacity = '0'; // 旧图淡出（transition 160ms 已有）
|
||||
await new Promise<void>((done) => {
|
||||
const probe = new Image();
|
||||
probe.src = next;
|
||||
probe.decode ? probe.decode().then(() => done()).catch(() => done()) : (probe.onload = () => done());
|
||||
setTimeout(done, 1200); // 网络兜底
|
||||
});
|
||||
img.src = next;
|
||||
img.classList.add('slide-in');
|
||||
img.style.transform = `translateX(${dir * 10}%)`;
|
||||
img.style.opacity = '0';
|
||||
void img.offsetWidth; // 强制 reflow 再进终态
|
||||
requestAnimationFrame(() => {
|
||||
img.style.transform = 'none';
|
||||
img.style.opacity = '1';
|
||||
});
|
||||
setTimeout(() => img.classList.remove('slide-in'), 320);
|
||||
}
|
||||
|
||||
const show = (i: number) => {
|
||||
idx = (i + shots.length) % shots.length;
|
||||
const n = shots.length;
|
||||
const prevIdx = idx;
|
||||
idx = (i + n) % n;
|
||||
const btn = shots[idx]!;
|
||||
img.src = btn.dataset.full ?? '';
|
||||
const firstOpen = !lb.open;
|
||||
const dir: 1 | -1 = ((idx - prevIdx + n) % n === 1 ? 1 : -1);
|
||||
hd = { on: false, failed: false, gen: hd.gen + 1 }; // ⑨ 换图重置 HD 态
|
||||
img.alt = btn.ariaLabel ?? '';
|
||||
const title = btn.dataset.title ?? '';
|
||||
titleEl.textContent = title;
|
||||
@@ -243,39 +459,44 @@ const first = cards[0];
|
||||
captionEl.textContent = btn.dataset.caption ?? '';
|
||||
captionEl.style.display = captionEl.textContent ? '' : 'none';
|
||||
}
|
||||
resetZoom(); // 换图回正：缩放态不跨图残留
|
||||
exifEl.textContent = btn.dataset.exif ?? '';
|
||||
exifEl.style.display = btn.dataset.exif ? '' : 'none';
|
||||
const countEl = document.getElementById('lb-count');
|
||||
if (countEl) countEl.textContent = `${idx + 1} / ${shots.length}`;
|
||||
if (countEl) countEl.textContent = `${idx + 1} / ${n}`;
|
||||
const orig = btn.dataset.original ?? '';
|
||||
(document.getElementById('lb-original') as HTMLAnchorElement).href = orig;
|
||||
const dl = document.getElementById('lb-download') as HTMLAnchorElement;
|
||||
dl.href = orig;
|
||||
dl.setAttribute('download', btn.dataset.title ?? 'photo');
|
||||
if (!reduced.matches) {
|
||||
img.style.opacity = '0';
|
||||
requestAnimationFrame(() => {
|
||||
img.style.opacity = '1';
|
||||
});
|
||||
resetZoom();
|
||||
applySideMeta();
|
||||
if (firstOpen) {
|
||||
// ① 起飞：先摆 contain 真身再克隆从缩略图矩形起飞盖过渡
|
||||
img.src = btn.dataset.full ?? '';
|
||||
lb.classList.remove('chrome-in', 'chrome-off');
|
||||
lb.showModal();
|
||||
requestAnimationFrame(() => lb.classList.add('chrome-in'));
|
||||
const thumb = btn.querySelector('img');
|
||||
if (thumb) flyFrom(thumb.getBoundingClientRect());
|
||||
maybeHint();
|
||||
} else {
|
||||
void transitionSwap(btn, dir); // ⑥ 换片过渡
|
||||
}
|
||||
if (!lb.open) lb.showModal();
|
||||
lastIdx = idx;
|
||||
preloadNeighbors();
|
||||
userHideChrome = false; // 换片重置召唤偏好（新图默认亮 chrome）
|
||||
};
|
||||
|
||||
shots.forEach((btn, i) => btn.addEventListener('click', () => show(i)));
|
||||
document.getElementById('lb-prev')?.addEventListener('click', () => show(idx - 1));
|
||||
document.getElementById('lb-next')?.addEventListener('click', () => show(idx + 1));
|
||||
document.getElementById('lb-close')?.addEventListener('click', () => lb.close());
|
||||
lb.addEventListener('close', resetZoom);
|
||||
lb.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'ArrowLeft') {
|
||||
e.preventDefault();
|
||||
show(idx - 1);
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
e.preventDefault();
|
||||
show(idx + 1);
|
||||
}
|
||||
lb.addEventListener('close', () => {
|
||||
flyBack(); // ① 回落到当前缩略图（实时矩形，列表滚动后仍准）
|
||||
resetZoom();
|
||||
lb.classList.remove('chrome-in', 'chrome-off', 'side-meta');
|
||||
});
|
||||
// 触屏快滑翻页（v2 保持）：横滑翻页与 ⑩ 竖拖关正交
|
||||
let x0: number | null = null;
|
||||
lb.addEventListener('touchstart', (e) => {
|
||||
x0 = e.touches[0]!.clientX;
|
||||
@@ -521,6 +742,116 @@ const first = cards[0];
|
||||
.lb-orig { margin-left: 0; }
|
||||
.lb-meta { order: 3; flex-basis: 100%; }
|
||||
}
|
||||
|
||||
/* ── v2.1 chrome 双层淡入（③）：层1 +140ms、层2 +300ms，仅 opacity 无位移 ── */
|
||||
.lb-l1, .lb-l2 { transition: opacity 200ms var(--ease); }
|
||||
#lb:not(.chrome-in) .lb-l1, #lb:not(.chrome-in) .lb-l2 { opacity: 0; }
|
||||
#lb.chrome-in .lb-l1 { animation: lbFade 300ms cubic-bezier(0.4, 0, 0.22, 1) 140ms both; }
|
||||
#lb.chrome-in .lb-l2 { animation: lbFade 300ms cubic-bezier(0.4, 0, 0.22, 1) 300ms both; }
|
||||
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
|
||||
/* 召唤态（i 键）与 zoom>1 自动隐：opacity 归零不接交互 */
|
||||
#lb.chrome-off .lb-l1, #lb.chrome-off .lb-l2 { opacity: 0; pointer-events: none; animation: none; }
|
||||
/* × 独立于双层 chrome（层1 只包箭头/计数）——全隐口径=只剩图；逃逸路径 Esc/i 保持 */
|
||||
#lb.chrome-off #lb-close { opacity: 0; pointer-events: none; }
|
||||
/* animation:none 掐掉 chrome-in 的 both 填充——动画填充压制普通声明，隐层曾被锁死 opacity:1 */
|
||||
#lb.chrome-off { cursor: zoom-in; }
|
||||
|
||||
/* 层1 计数：右上角 close 旁（原底行挪出） */
|
||||
.lb-count {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 64px;
|
||||
z-index: 11;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: #98a2b3;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* 首开提示胶囊（⑦）：底部居中 meta 上方，2.6s 自隐由 JS 控制 */
|
||||
.lb-hint {
|
||||
position: absolute;
|
||||
bottom: 118px;
|
||||
left: 50%;
|
||||
translate: -50% 0;
|
||||
z-index: 11;
|
||||
margin: 0;
|
||||
padding: 7px 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
background: rgba(20, 24, 30, 0.72);
|
||||
color: #dfe6f3;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 缩放指示（⑦）：右下 mono 小字 */
|
||||
.lb-zoombadge {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
bottom: 14px;
|
||||
z-index: 11;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: #dfe6f3;
|
||||
opacity: 0;
|
||||
transition: opacity 240ms var(--ease);
|
||||
pointer-events: none;
|
||||
}
|
||||
.lb-zoombadge.on { opacity: 0.9; }
|
||||
|
||||
/* 长图侧置 meta（⑧）：竖图宽视口时层2 挪进右侧 letterbox，横图维持底部 */
|
||||
#lb.side-meta .lb-l2 {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
translate: 0 -50%;
|
||||
width: 216px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.08);
|
||||
padding-left: 16px;
|
||||
}
|
||||
#lb.side-meta .lb-l2 .lb-row { flex-direction: column; align-items: flex-start; }
|
||||
|
||||
/* FLIP 起飞/回落克隆（①）：dialog 内 absolute（dialog 全屏故 viewport 坐标等价）；
|
||||
关闭回落克隆挂 body 需 fixed（dialog 关闭即离 top-layer，回落动画要活到 dialog 之外） */
|
||||
:global(.lb-flip-img) {
|
||||
position: absolute;
|
||||
z-index: 6; /* 盖真身、让位 chrome(11) */
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
pointer-events: none;
|
||||
transition: left 300ms cubic-bezier(0.4, 0, 0.22, 1),
|
||||
top 300ms cubic-bezier(0.4, 0, 0.22, 1),
|
||||
width 300ms cubic-bezier(0.4, 0, 0.22, 1),
|
||||
height 300ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
}
|
||||
:global(.lb-flip-back) {
|
||||
position: fixed;
|
||||
z-index: 2147483000;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
pointer-events: none;
|
||||
transition: left 300ms cubic-bezier(0.4, 0, 0.22, 1),
|
||||
top 300ms cubic-bezier(0.4, 0, 0.22, 1),
|
||||
width 300ms cubic-bezier(0.4, 0, 0.22, 1),
|
||||
height 300ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
}
|
||||
|
||||
/* 换片过渡（⑥）：新图侧向 10% 位移淡入由 JS inline 过渡驱动 */
|
||||
#lb-img.slide-in { transition: opacity 280ms var(--ease), transform 280ms var(--ease); }
|
||||
|
||||
/* reduced-motion：v2.1 所有新动效全豁免（缩放/拖拽本体不在此列，由 v2 保持） */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#lb.chrome-in .lb-l1, #lb.chrome-in .lb-l2 { animation: none; opacity: 1; }
|
||||
.lb-l1, .lb-l2, .lb-zoombadge { transition: none; }
|
||||
.lb-flip-img, :global(.lb-flip-back) { display: none; }
|
||||
#lb-img.slide-in { transition: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
|
||||
Reference in new issue
Block a user