【jQuery/JS】CSSアニメーション・トランジション終了時に処理を行う完全ガイド｜animationend・transitionend・複数要素・promiseまで

CSSアニメーションやトランジションが終わったタイミングで処理を実行したい場合、animationend・transitionend イベントを使います。この記事では基本的なイベント検知・複数要素の完了待ち・Promise化・よくある落とし穴まで解説します。

animationend / transitionend の基本

$(function () {
  // CSSトランジション終了後に処理
  $('#box').on('transitionend', function () {
    console.log('トランジション終了');
    $(this).addClass('is-done');
  });

  // CSSアニメーション（@keyframes）終了後に処理
  $('#box').on('animationend', function () {
    console.log('アニメーション終了');
    $(this).remove(); // アニメーション後に要素を削除
  });

  // トリガー: クラスを付けてアニメーション開始
  $('#start-btn').on('click', function () {
    $('#box').addClass('is-animating');
  });
});

一度だけ発火させる（.one()の活用）

transitionend は複数のプロパティがトランジションする場合、プロパティごとに発火します。一度だけ処理したい場合は .one() を使います。

$(function () {
  // .one() で一度だけ実行
  $('#box').one('transitionend', function () {
    console.log('1回だけ実行');
  });

  // または off() で手動解除
  function onTransitionEnd() {
    console.log('トランジション終了');
    $(this).off('transitionend', onTransitionEnd);
  }
  $('#box').on('transitionend', onTransitionEnd);
});

特定プロパティのトランジション終了を検知する

$(function () {
  $('#box').on('transitionend', function (e) {
    // transformのトランジションが終わったときだけ処理
    if (e.originalEvent.propertyName !== 'transform') return;

    console.log('transformトランジション終了');
    $(this).addClass('transform-done');
  });
});

複数要素のアニメーション完了を全て待つ

$(function () {
  var $items = $('.animated-item');
  var doneCount = 0;

  $items.on('animationend', function () {
    doneCount++;
    if (doneCount === $items.length) {
      console.log('全要素のアニメーション完了');
      showNextSection();
    }
  });

  // クラスを付けてアニメーション開始
  $items.addClass('is-animating');
});

トランジション終了後の処理をPromise化する

function waitForTransition($el) {
  return new Promise(function (resolve) {
    $el.one('transitionend', function (e) {
      resolve(e);
    });
  });
}

$(function () {
  // async/await で順次処理
  async function runSequence() {
    // 1. フェードアウト
    $('#box').addClass('is-fading');
    await waitForTransition($('#box'));

    // 2. コンテンツを変更
    $('#box').text('新しいコンテンツ').removeClass('is-fading').addClass('is-visible');
    await waitForTransition($('#box'));

    console.log('シーケンス完了');
  }

  $('#start-btn').on('click', runSequence);
});

まとめ

CSSアニメーション/トランジション終了検知のポイントをまとめます。

• CSSアニメーション: animationend イベント
• CSSトランジション: transitionend イベント
• 一度だけ: .one("transitionend", fn)
• 複数プロパティ: event.originalEvent.propertyName で絞り込み
• 複数要素の完了待ち: カウンター変数で全完了を検知

関連記事: slideToggle()がカクつく原因と対処法 / 要素をフェードイン・フェードアウトさせる方法

よくある質問（FAQ）