38 lines
919 B
Markdown
38 lines
919 B
Markdown
# 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/
|
||
-->
|