add official Chrome feature demos

2026-06-14 15:22:32 +08:00
parent 500217f2fd
commit de690f85fa
32 changed files with 2376 additions and 567 deletions
@@ -0,0 +1,37 @@
+# Demo 8：View Transitions
+
+<div class="grid grid-cols-2 gap-8 mt-8">
+
+<div class="card-green">
+<div class="font-semibold mb-3">为什么演示</div>
+<div class="space-y-2 text-sm">
+
+- 效果直观，风险低
+- 能说明 Chrome 在升级 Web 体验能力
+- 适合和 Agentic Web 主线形成对照：工具层和体验层都在进化
+
+</div>
+</div>
+
+<div class="card-blue">
+<div class="font-semibold mb-3">运行入口</div>
+<div class="space-y-2 text-sm">
+
+- 打开 <span class="font-mono">/demo/view-transitions/index.html</span>
+- 点击订单 / 分析 / 设置
+- 支持时走 <span class="font-mono">document.startViewTransition()</span>
+- 不支持时普通切换
+
+</div>
+</div>
+
+</div>
+
+<div class="mt-8 card text-sm">
+讲解结论：View Transitions 把“状态变化”从手写动画提升为浏览器级能力，适合渐进增强。
+</div>
+
+<!--
+官方入口：
+- https://view-transitions.chrome.dev/
+-->