ページ内をなめらかに切り替える

<!-- 一覧と詳細で、繋ぎたい要素に同じ名前をつける -->
<img class="thumb" style="view-transition-name: pic-a" src="...">

<script>
  // 未対応ブラウザでも壊れないように包む
  function transition(update) {
    if (document.startViewTransition) document.startViewTransition(update);
    else update();                       // 一瞬で切り替わるだけ
  }

  // 画面を書き換える処理を、そのまま渡す
  transition(() => {
    listView.hidden = true;
    detailView.hidden = false;
    detailImage.style.viewTransitionName = 'pic-a';  // 同じ名前で繋がる
  });
</script>

<style>
  /* 動きの本体はブラウザが作る。CSS では速さと曲線だけ調整する */
  ::view-transition-group(pic-a) {
    animation-duration: .42s;
    animation-timing-function: cubic-bezier(.22, .9, .3, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*) { animation-duration: 1ms !important }
  }
</style>