add official Chrome feature demos

public/demo/view-transitions/app.js

@@ -0,0 +1,56 @@
+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");