30 lines
987 B
HTML
30 lines
987 B
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>View Transitions Demo</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
</head>
|
|
<body>
|
|
<main class="shell">
|
|
<section class="hero">
|
|
<p class="eyebrow">Chrome UI capability</p>
|
|
<h1>View Transitions</h1>
|
|
<p>点击不同状态，观察浏览器把 DOM 更新包装成一次连续过渡。没有支持时，页面仍然即时切换。</p>
|
|
</section>
|
|
|
|
<section class="app" id="app">
|
|
<nav class="tabs" aria-label="Demo states">
|
|
<button class="active" data-view="orders">订单</button>
|
|
<button data-view="analytics">分析</button>
|
|
<button data-view="settings">设置</button>
|
|
</nav>
|
|
<div class="panel" id="panel"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="./app.js" type="module"></script>
|
|
</body>
|
|
</html>
|