57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
const panel = document.querySelector("#panel");
|
|
const buttons = Array.from(document.querySelectorAll("[data-view]"));
|
|
|
|
const views = {
|
|
orders: {
|
|
title: "订单工作台",
|
|
body: "状态从列表切换到业务面板，浏览器负责把 DOM 更新过渡成连续动画。",
|
|
metrics: ["128 个待处理", "96.4% 准时率"],
|
|
},
|
|
analytics: {
|
|
title: "实时分析",
|
|
body: "适合展示页面状态、卡片位置、详情视图之间的平滑切换。",
|
|
metrics: ["42ms INP", "3 条异常趋势"],
|
|
},
|
|
settings: {
|
|
title: "权限设置",
|
|
body: "在支持的浏览器里使用 View Transitions；不支持时保留普通状态切换。",
|
|
metrics: ["7 个角色", "24 项权限"],
|
|
},
|
|
};
|
|
|
|
function render(view) {
|
|
const data = views[view];
|
|
panel.innerHTML = `
|
|
<article class="card">
|
|
<p class="eyebrow">Current view</p>
|
|
<h2>${data.title}</h2>
|
|
<p>${data.body}</p>
|
|
</article>
|
|
<section class="summary">
|
|
${data.metrics
|
|
.map((metric) => `<article class="card"><strong>${metric}</strong><span>View transition keeps the context visible.</span></article>`)
|
|
.join("")}
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
function setActive(view) {
|
|
buttons.forEach((button) => {
|
|
button.classList.toggle("active", button.dataset.view === view);
|
|
});
|
|
render(view);
|
|
}
|
|
|
|
buttons.forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const next = button.dataset.view;
|
|
if (document.startViewTransition) {
|
|
document.startViewTransition(() => setActive(next));
|
|
return;
|
|
}
|
|
setActive(next);
|
|
});
|
|
});
|
|
|
|
setActive("orders");
|