markdown

はじめに (対象読者・この記事でわかること)

本記事は、Webフロントエンドの開発に携わるエンジニア、もしくは JavaScript で動的に要素を生成する機会がある方を対象としています。
この記事を読むことで、以下のことができるようになります。

  • appendChild や innerHTML で追加した要素を、ページロード時と同様にスムーズに「ふわっと」出現させる実装方法
  • CSS のトランジション／アニメーションと JavaScript の組み合わせで、コード量を最小限に抑えるコツ

動的 UI が増える現代の Web サイトにおいて、ユーザー体験を損なわない自然なエフェクトは重要です。本記事は、そうしたニーズに応える実践的なテクニックを提供することを目的に執筆しました。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

  • HTML と CSS の基本的な構造・記述方法
  • JavaScript の基礎（変数宣言、関数、DOM 操作）

動的要素のフェードイン概要

Web アプリケーションでは、Ajax で取得したデータやユーザー操作に応じて DOM に要素を追加するケースが頻繁にあります。
しかし、単に parent.appendChild(newElem) すると、追加された瞬間に表示が完了し、急に画面が変化してしまいます。これがユーザーに「ちらつき」や「不自然さ」を感じさせる原因です。

フェードイン（opacity が 0 → 1 に変化するエフェクト）を適用すれば、視覚的に滑らかな遷移が実現できます。ポイントは次の二点です。

  1. CSS 側でトランジションやアニメーションの定義を行う
    - opacity と transform（例: translateY）を組み合わせると、上下にずれながらフェードインし、より立体感が出ます。
  2. JavaScript で「クラスの付け替え」だけでエフェクトを起動させる
    - 追加直後に「開始前」クラスを付与し、次の描画フレームで「開始後」クラスへ切り替えるだけで、CSS が自動的に遷移を処理します。

このシンプルな流れを踏めば、複雑なタイマー処理や setTimeout の乱用を避けられ、保守性の高い実装が可能です。

実装手順：ふわっと出現させる完全ガイド

以下では、純粋な JavaScript と CSS だけで実装できる手順をステップごとに解説します。フレームワーク（React, Vue 等）でも概念は同じなので、応用がしやすい構造です。

ステップ 1：ベースとなる CSS を用意する

まずはアニメーションの土台となるクラスを定義します。ここでは 2 つのクラスを用意します。

クラス名 目的
.fade-in-init 要素がまだ見えない（opacity: 0）状態。レイアウトは確保したまま。
.fade-in-active アニメーションが開始するクラス。opacity: 1 と同時に微妙に上方向へ移動させる。 
Css

/* style.css */
.fade-in-init {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* アニメーション開始時に付与 */
.fade-in-active {
  opacity: 1;
  transform: translateY(0);
}
  • transition に opacity と transform の両方を指定することで、フェードインと同時に「上に浮かび上がる」ような自然な動きを実装しています。
  • 0.4s は目安です。プロジェクトのデザイン指針に合わせて調整してください。

ステップ 2：要素生成とクラス付与ロジック

次に、JavaScript 側で要素を生成し、適切なタイミングでクラスを切り替える関数を作ります。

Js

/**
 * container に対して、content（HTML 文字列）をふわっと出現させる
 * @param {HTMLElement} container 追加先の要素
 * @param {string} content 追加したい HTML 文字列
 */
function appendWithFade(container, content) {
  // 1. 要素を作成し、初期クラスを付与
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = content.trim();
  const newElem = tempDiv.firstElementChild; // 文字列が <li> など単一要素の場合

  newElem.classList.add('fade-in-init');
  container.appendChild(newElem);

  // 2. 次の描画フレームでクラスを切り替える
  requestAnimationFrame(() => {
    // 強制リフローを防ぐために、2回目の requestAnimationFrame で実行
    requestAnimationFrame(() => {
      newElem.classList.add('fade-in-active');
      // 初期クラスは不要になるので削除（任意）
      newElem.classList.remove('fade-in-init');
    });
  });
}

ポイント解説

  • requestAnimationFrame の二重呼び出し
  • 1 回目でブラウザに「DOM が更新された」ことを通知し、次のフレームでクラス変更を行うと、transition が正しく発火します。

  • 二重にすることで、レイアウト計算が確定した後にクラスが付くため、transition がスキップされる問題を防げます。

  • innerHTML の利用

  • 簡易的に HTML 文字列から要素へ変換しています。安全性が必要な場合はサニタイズ処理を入れるか、createElement 系で手動組み立てしてください。

ステップ 3：実際に呼び出す例

HTML 側にコンテナ要素（例: <ul id="list"></ul>）を用意し、ボタン操作で要素を追加してみます。

Html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フェードインデモ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul id="list">
    <li class="fade-in-init fade-in-active">既存アイテム 1</li>
  </ul>

  <button id="addBtn">アイテム追加</button>

  <script src="script.js"></script>
</body>
</html>

Js

// script.js
document.getElementById('addBtn').addEventListener('click', () => {
  const newItem = `<li>新規アイテム ${Date.now()}</li>`;
  const list = document.getElementById('list');
  appendWithFade(list, newItem);
});
  • クリックするたびに <li> が生成され、fade-in-init → fade-in-active の流れで自然にフェードインします。
  • 既存のアイテムには最初から fade-in-active を付与しておくと、ページロード時にすでに表示されます。

ステップ 4：複数要素を一括でフェードインさせる

場合によっては、API から取得した配列データをまとめてリストに描画したいことがあります。その際は、ループ内で appendWithFade を呼ぶのではなく、一括で DOM に挿入してからアクティブ化すると、パフォーマンスが向上します。

Js

function batchAppendWithFade(container, htmlArray) {
  const fragment = document.createDocumentFragment();

  htmlArray.forEach(html => {
    const temp = document.createElement('div');
    temp.innerHTML = html.trim();
    const elem = temp.firstElementChild;
    elem.classList.add('fade-in-init');
    fragment.appendChild(elem);
  });

  container.appendChild(fragment);

  // まとめてアクティブ化
  requestAnimationFrame(() => {
    const children = container.querySelectorAll('.fade-in-init');
    children.forEach(el => {
      el.classList.add('fade-in-active');
      el.classList.remove('fade-in-init');
    });
  });
}
  • DocumentFragment にまず全要素を追加し、一度の DOM 挿入でレイアウトコストを削減。
  • 最後に requestAnimationFrame で全要素のクラスを切り替えるだけなので、スムーズな一括フェードインが実現できます。

ハマった点やエラー解決

項目 内容 解決策
transition が発火しない classList.add('fade-in-active') を appendChild 直後に実行した requestAnimationFrame（二重）で次フレームに遅延させた
途中で要素が消える fade-in-init と fade-in-active を同時に付与した 初期状態では必ず fade-in-init のみ付与し、後で fade-in-active に切り替える
複数要素が同時に出現しない ループ内で逐次 appendWithFade を呼んだ batchAppendWithFade のように DocumentFragment 経由で一括挿入し、まとめてクラスを変更した
Safari でちらつく transform が未指定の要素に適用されていない will-change: opacity, transform; を .fade-in-init に追加し、GPU レイヤーを確保した

さらに高度なテクニック

  1. IntersectionObserver と組み合わせ
    - スクロール位置に応じて要素が画面に入った瞬間にフェードインさせると、ページ全体の初期ロードが軽くなる。

  2. CSS カスタムプロパティで遅延時間を変化させる
    css .fade-in-init { --delay: 0s; transition-delay: var(--delay); } - JavaScript で elem.style.setProperty('--delay',${i * 0.1}s); とすれば、リストアイテムを順次遅らせて表示できる。

  3. アクセシビリティ配慮
    - prefers-reduced-motion: reduce が有効な環境では、トランジションを無効化する。
    css @media (prefers-reduced-motion: reduce) { .fade-in-init, .fade-in-active { transition: none; } }

まとめ

本稿では、JavaScript で動的に追加した要素を CSS のトランジションだけでふわっと出現させる手法を解説しました。

  • CSS に { .fade-in-init, .fade-in-active } の2クラスでフェードインの土台を作る
  • JavaScript では requestAnimationFrame を二重に用いて、DOM 挿入直後にクラスを切り替えるだけで自然なアニメーションを実現
  • 複数要素の一括処理や IntersectionObserver、アクセシビリティ対応といった拡張も簡単に組み込める

このテクニックを活用すれば、コード量を抑えつつユーザー体験を向上させられます。次回は スクロール連動型の遅延フェードイン（IntersectionObserver）や React/Vue への適用例 を取り上げる予定です。

参考資料