View Transitions APIで画面遷移するときのトランジションアニメーションがCSSだけでも動くようになりました。CSSをに@view-transitionを付与するだけで、簡単にページ遷移時のトランジションが発火します。ただし、現時点（2024年11月現在）では最新のGoogle Chrome（126）とEdgeだけで動作し、SafarやFirefoxは未対応のようです。実装するにはCSSで以下のように指定をします。

@view-transition {
 navigation: auto;
}

• CSS View Transitions Module Level 2
• @view-transition | Can I use… Support tables for HTML5, CSS3, etc

要素ごとのアニメーションの実装

遷移前と遷移後のページで特定の要素を連携させてアニメーションすることも可能です。以下のような動きもHTMLとCSSだけで再現できます。

遷移前と遷移後の連携したいHTML要素に一意のclass属性などを指定します。例では記事一覧のli要素と、記事詳細のarticleの動きを連動させるものです。

遷移前HTML

<li class="list-1"><a href="#">＊＊＊＊</a></li>

遷移先HTML

<article class="list-1">＊＊＊＊</article>

対象の要素のCSSセレクタに、view-transition-nameプロパティを指定し、同一の値を設定します。注意点としては同じページ内に複数のview-transition-name値があると正常に動かないことです。必ず個別に指定する必要があります。

.list-1{
 view-transition-name: list-1;
}

動的に処理する場合とか

CMSの記事一覧などを動的に処理する場合でもview-transition-nameはユニークな値をつけてあげる必要があります。例えばNext.jsでWordPressの記事一覧を取得するときなどは値に記事IDを付与するなどで実装します。

const postList = ({post}) => {
 return (<li key={post.id} style={{ 'view-transition-name':`list-${post.id}` }}>
  <Link href={`/${post.slug}`}>
   要素
  </Link>
 </li>);
}

早くほかのブラウザでも自由に使えるようになると良いですね。ちなみに、非対応のブラウザでは無視されてプログレッシブエンハンスメントで通常の動作になるため、サイトの閲覧の弊害になることはありません。

おしまい♥

タグ：Next.jsWebブラウザWordPress