🖊
Chrome 126 で SPA でない通常のページ遷移の際にも間を補完するアニメーションを実装することが可能になりました。
Chrome 126 is rolling out now! With support for cross-document transitions in the ViewTransitions API, the CloseWatcher API re-enabled, trigger-rumbled for the Gamepad API and there's plenty more, and plenty more. Adriana Jara has all the details about what's new for developers in Chrome 126.
View Transition API を使用すると、ウェブサイトのビュー間の遷移を追加できます。
次の CSS を遷移元と遷移先で設定しておくことで、デフォルトではフェードイン・アウトなアニメーションが適用されるようになります。
@view-transition {
navigation: auto;
}
例としてナビゲーションにマーカーが付くようなページを用意しました。
これは CSS Anchor Positioning API を利用して実装していて、それぞれのページでは position-anchor
にそのページのものを指定するだけでページ遷移時にアニメーションが適用されます。
<body>
<nav>
<ul>
<li id="navHome">
<a href="./index.html">🏠 Home</a>
</li>
<li id="navBlog">
<a href="./blog.html">🖊 Blog</a>
</li>
<li id="navAbout">
<a href="./about.html">🐴 About</a>
</li>
</ul>
</nav>
<div id="mark"></div>
</body>
@view-transition {
navigation: auto;
}
#navHome {
anchor-name: --anchor-home;
}
#navBlog {
anchor-name: --anchor-blog;
}
#navAbout {
anchor-name: --anchor-about;
}
#mark {
position: absolute;
position-anchor: --anchor-home;
background: black;
left: anchor(left);
top: anchor(top);
width: 4px;
height: 32px;
view-transition-name: mark;
}
#mark {
position-anchor: --anchor-home;
}