View Transition API を使った MPA でのページ間アニメーション

Chrome 126 で SPA でない通常のページ遷移の際にも間を補完するアニメーションを実装することが可能になりました。

次の CSS を遷移元と遷移先で設定しておくことで、デフォルトではフェードイン・アウトなアニメーションが適用されるようになります。

@view-transition {
  navigation: auto;
}

例としてナビゲーションにマーカーが付くようなページを用意しました。

https://yaakaito.github.io/code-sandbox/mp-view-transition/index.html

これは CSS Anchor Positioning API を利用して実装していて、それぞれのページでは position-anchor にそのページのものを指定するだけでページ遷移時にアニメーションが適用されます。

CSS アンカーポジショニング API のご紹介 | Blog | Chrome for Developers

  <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;
}