JavaScriptのView Transition APIの使い方【DOM更新をなめらかに切り替える】

<main class="app-shell">
  <img class="nines-logo" src="https://kjnine.com/wp-content/themes/kjnines_theme/images/svg2/nines_logo.svg" alt="NINES">
  <header>
    <p class="eyebrow">VIEW TRANSITION</p>
    <h1>記事カードの表示切り替え</h1>
    <div class="filter-buttons" aria-label="記事の絞り込み">
      <button type="button" data-filter="all" aria-pressed="true">すべて</button>
      <button type="button" data-filter="css" aria-pressed="false">CSS</button>
      <button type="button" data-filter="js" aria-pressed="false">JavaScript</button>
    </div>
  </header>

  <section id="articleGrid" class="article-grid" aria-live="polite"></section>
</main>

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 32px;
  background: #f1f4f8;
  color: #111;
  font-family: system-ui, sans-serif;
}

.app-shell {
  position: relative;
  width: min(100%, 920px);
  margin: 0 auto;
}

.nines-logo {
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  opacity: 0.14;
}

.eyebrow {
  color: #0057ff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}

button {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

button[aria-pressed="true"] {
  border-color: #0057ff;
  background: #0057ff;
  color: #fff;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  view-transition-name: article-grid;
}

.article-card {
  min-height: 180px;
  padding: 22px;
  border: 1px solid #d7deea;
  background: #fff;
}

.article-card span {
  color: #0057ff;
  font-size: 0.78rem;
  font-weight: 800;
}

::view-transition-old(article-grid) {
  animation: 180ms ease both fade-out;
}

::view-transition-new(article-grid) {
  animation: 260ms ease both fade-in;
}

@keyframes fade-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation-duration: 0.01ms;
  }
}

const articles = [
  { category: 'css', title: 'CSS Anchor Positioning入門' },
  { category: 'js', title: 'View Transition API入門' },
  { category: 'css', title: 'Scroll-driven Animations入門' },
  { category: 'js', title: 'Popover APIを制御する' },
];

const grid = document.querySelector('#articleGrid');
const buttons = document.querySelectorAll('[data-filter]');

function render(filter = 'all') {
  const filtered = filter === 'all'
    ? articles
    : articles.filter((article) => article.category === filter);

  grid.innerHTML = filtered.map((article) => `
    <article class="article-card">
      <span>${article.category.toUpperCase()}</span>
      <h2>${article.title}</h2>
      <p>標準Web APIでUIを作る実装メモです。</p>
    </article>
  `).join('');
}

function updateFilter(button) {
  buttons.forEach((item) => {
    item.setAttribute('aria-pressed', String(item === button));
  });
  render(button.dataset.filter);
}

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    if (!document.startViewTransition) {
      updateFilter(button);
      return;
    }

    document.startViewTransition(() => updateFilter(button));
  });
});

render();

document.startViewTransition(() => {
  updateTheDOM();
});