view-transition-name

/* <custom-ident> 値の例 */
view-transition-name: header;
view-transition-name: figure-caption;

/* キーワード値 */
view-transition-name: none;
view-transition-name: match-element;

/* グローバル値 */
view-transition-name: inherit;
view-transition-name: initial;
view-transition-name: revert;
view-transition-name: revert-layer;
view-transition-name: unset;

figcaption {
  view-transition-name: figure-caption;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}

.dont-animate-me {
  view-transition-name: none;
}

<ul>
  <li>アイテム 1</li>
  <li>アイテム 2</li>
  <li>アイテム 3</li>
  <li>アイテム 4</li>

  <!-- ... -->

  <li>アイテム 99</li>
</ul>

li:nth-child(1) {
  view-transition-name: item1;
}
li:nth-child(2) {
  view-transition-name: item2;
}
li:nth-child(3) {
  view-transition-name: item3;
}
li:nth-child(4) {
  view-transition-name: item4;
}

/* ... */

li:nth-child(99) {
  view-transition-name: item99;
}

li {
  view-transition-name: match-element;
}

figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-group(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}

<main class="match-element-applied">
  <ul>
    <li>
      <h2><a href="#">HTML</a></h2>
      <h3>ハイパーテキストマークアップ言語</h3>
      <p>
        ハイパーテキストマークアップ言語 (HTML) は、ウェブの最も基本的な構成要素です。これは、ウェブコンテンツの意味と構造を定義します。HTML は、ウェブ文書やアプリを構成するための基本的な要素を提供します。
      </p>
    </li>
    <li>
      <h2><a href="#">CSS</a></h2>
      <h3>カスケードスタイルシート</h3>
      <p>
        カスケードスタイルシート (CSS) は、HTML や XML（SVG、MathML、XHTML などの XML の派生言語も含む）で記述された文書の表示方法を記述するために使用されるスタイルシート言語です。CSS は、要素が画面上、紙面、音声、またはその他のメディア上でどのように表示されるべきかを記述します。
      </p>
    </li>
    <li>
      <h2><a href="#">SVG</a></h2>
      <h3>スケーラブルベクターグラフィック</h3>
      <p>
        スケーラブルベクターグラフィック (SVG) は、二次元ベクターグラフィックを説明するための XML ベースのマークアップ言語です。
      </p>
    </li>
    <li>
      <h2><a href="#">JS</a></h2>
      <h3>JavaScript</h3>
      <p>
        JavaScript (JS) は、ウェブのネイティブのプログラミング言語です。JavaScript は、第一級関数を備えた、軽量でインタープリタ型（あるいはジャストインタイムコンパイル型）のプログラミング言語です。ウェブページのスクリプト言語として最もよく知られていますが、Node.js など、ブラウザー以外の多くの環境でも使用されています。
      </p>
    </li>
  </ul>
  <article></article>
</main>

<form>
  <label for="match-element-checkbox">
    リストアイテムに <code>match-element</code> を適用する
  </label>
  <input type="checkbox" id="match-element-checkbox" checked />
</form>

/* 全般的なスタイルとリセット */
* {
  box-sizing: border-box;
  font-size: 0.9rem;
}

html {
  font-family: "Helvetica", "Arial", sans-serif;
  height: 100%;
}

body {
  margin: 0;
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
li h2 {
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  overflow: hidden;
  container-type: inline-size;
}

li p {
  display: none;
}

li.active-item p {
  display: block;
}

li:nth-child(1) {
  background-color: #cbc0d3;
  border: 20px solid #cbc0d3;
}

li:nth-child(2) {
  background-color: #efd3d7;
  border: 20px solid #efd3d7;
}

li:nth-child(3) {
  background-color: #feeafa;
  border: 20px solid #feeafa;
}

li:nth-child(4) {
  background-color: #dee2ff;
  border: 20px solid #dee2ff;
}

/* リンク */

a {
  text-decoration: none;
  color: rgb(0 0 255 / 0.8);
}

a:hover,
a:focus {
  color: rgb(100 100 255);
}

/* フォームとチェックボックスのスタイル */
form {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  background-color: white;
  padding: 10px;
  border: 1px solid black;
}

main {
  container-type: inline-size;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 2cqw;
  position: relative;
}

ul {
  width: 35cqw;
  display: flex;
  flex-direction: column;
  gap: 1cqw;
}

article {
  flex: 1;
}

li {
  flex: 1;
}

.active-item {
  position: absolute;
  z-index: 1;
  translate: 37cqw;
  width: calc(100% - 37cqw);
  height: 100%;
}

.match-element-applied li {
  view-transition-name: match-element;
}

::view-transition-group(*) {
  animation-duration: 0.5s;
}

html::view-transition-old(*),
html::view-transition-new(*) {
  height: 100%;
}

const mainElem = document.querySelector("main");
let prevElem;
let checkboxElem = document.querySelector("input");

// ビュートランジションのコード
function updateActiveItem(event) {
  // クリックされたリンクが含まれているリストアイテムを取得
  const clickedElem = event.target.parentElement.parentElement;

  // リストアイテムに active-item クラスを設定
  clickedElem.className = "active-item";

  // 前回クリックされたアイテムがあれば、それを追跡する。
  // <article> の上に常にリストアイテムが 1 つだけ表示されるように、
  // 前回のアイテムから active-item クラスを除去する。
  if (prevElem === clickedElem) {
    prevElem.className = "";
    prevElem = undefined;
  } else if (prevElem) {
    prevElem.className = "";
    prevElem = clickedElem;
  } else {
    prevElem = clickedElem;
  }
}

mainElem.addEventListener("click", (event) => {
  event.preventDefault(); // クリックされたときに iframe がスクロールするのを防ぐ
  // <main> 要素内のリンクがクリックされない限り、何もしない
  if (event.target.tagName !== "A") {
    return;
  }

  // ビュー遷移が対応していない場合は、updateActiveItem() を単独で実行
  if (!document.startViewTransition) {
    updateActiveItem(event);
  } else {
    // updateActiveItem() を startViewTransition() 経由で実行
    const transition = document.startViewTransition(() =>
      updateActiveItem(event),
    );
  }
});

// <main> のクラスをオン／オフに切り替えて、match-element の適用有無を制御

checkboxElem.addEventListener("change", () => {
  mainElem.classList.toggle("match-element-applied");
});