# 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/
-->