kdcsライブラリー

View Transitions APIの使い方

headのmetaタグに以下を追加する

<meta name="view-transition" content="same-origin">

common.cssに以下を追加

@view-transition {
  navigation: auto;
}

::view-transition-old(root) と ::view-transition-new(root) を使用して、transitionの設定を行う
(root)はページ全体のtransitionの場合に記述する
要素個別に設定する場合は()内はユニークな名前を付けて運用する

例はフェードズームアウトからのフェードズームイン

/* フェード+ズーム */
@keyframes zoom-fade-in {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes zoom-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.10); }
}

::view-transition-new(root) {
  animation: zoom-fade-in 0.5s ease;
}

::view-transition-old(root) {
  animation: zoom-fade-out 0.4s ease;
}

WordPress の「動的に生成される一覧ページ」と「個別ページ」で View Transitions API 用の固有クラス（または view-transition-name）を自動付与する方法

一覧の画像のview-transition-nameに投稿IDを付与する方法

<?php while ( have_posts() ) : the_post(); ?>
  <?php $id = get_the_ID(); ?>

  <a href="<?php the_permalink(); ?>">
    <img 
      src="<?php echo get_the_post_thumbnail_url(); ?>"
      class="product-img"
      view-transition-name="product-<?php echo $id; ?>"
    >
  </a>

<?php endwhile; ?>

個別ページで画像のview-transition-nameに投稿IDを付与する方法

<?php $id = get_the_ID(); ?>

<img 
  src="<?php echo get_the_post_thumbnail_url(); ?>"
  class="product-img"
  view-transition-name="product-<?php echo $id; ?>"
>

View Transitions APIのためにクラスを動的に付ける必要はなく、必要なのは view-transition-name のユニーク性だけなのでクラスを動的にする必要性は低い。