【JavaScript】transitionend –  CSSトランジションが完了したときに発生するイベント

CSSのトランジションは、要素のスタイルが変化する際に滑らかなアニメーション効果を提供する便利な機能です。このトランジションが終了するタイミングを検知して追加の処理を行いたい場合に、JavaScriptのtransitionendイベントを活用できます。今回は、transitionendイベントの基礎から応用例までをまとめていきたいと思います。

transitionendイベントとは？

transitionendイベントは、CSSのtransitionプロパティを使用したスタイル変化が終了したタイミングで発生するイベントです。
これを利用すると、トランジション終了後に動的な処理を実行したり、次の動作を開始することができます。

主な特徴

基本構文

以下のようにaddEventListenerを使ってイベントを検知します。

element.addEventListener('transitionend', (event) => {
  console.log('トランジションが終了しました:', event.propertyName);
});

基本的な使い方

以下は、ボタンをクリックしてトランジションをトリガーし、終了後に追加の処理を行う例です。

See the Pen Untitled by tones (@tonescodedesign) on CodePen.

const box = document.getElementById('box');
const button = document.getElementById('trigger');

// ボタンをクリックしてトランジションをトリガー
button.addEventListener('click', () => {
  box.classList.toggle('expand');
});

// トランジション終了時に処理を実行
box.addEventListener('transitionend', (event) => {
  console.log(`トランジションが終了しました: ${event.propertyName}`);
  alert('トランジションが完了しました！');
});

<button id="trigger">トランジション開始</button>
<div class="box" id="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition: all 1s ease;
  margin: 50px auto;
}

.box.expand {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
}

transitionendの解説

イベントオブジェクトのプロパティ

transitionendイベントの引数で渡されるeventオブジェクトには、以下のような便利なプロパティがあります。

box.addEventListener('transitionend', (event) => {
  console.log('対象プロパティ:', event.propertyName);
  console.log('経過時間:', event.elapsedTime, '秒');
});

複数プロパティのトランジション

CSSで複数のプロパティに対してトランジションを設定している場合、各プロパティごとにtransitionendイベントが発生します。

.box {
  transition: width 1s, height 2s;
}

この場合、transitionendイベントはwidthとheightのトランジション終了時にそれぞれ発生します。

サンプルコード

以下は、トランジション終了後に次のアクション（例えば新しいスタイルの適用）を行う例です。

See the Pen transitionend by tones (@tonescodedesign) on CodePen.

const box = document.getElementById('box');
const button = document.getElementById('start');

button.addEventListener('click', () => {
  box.classList.add('move');
});

box.addEventListener('transitionend', () => {
  box.style.backgroundColor = 'lightcoral';
  console.log('次のスタイルを適用しました');
});

<button id="start">トランジション開始</button>
<div class="box" id="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition: all 1s ease;
}

.box.move {
  transform: translateX(200px);
}

使用時の注意点

複数イベントの発生

複数のCSSプロパティが同時にトランジションする場合、それぞれのプロパティに対してtransitionendイベントが発生します。そのため、特定のプロパティの終了だけを検知したい場合はevent.propertyNameを条件として利用します。

box.addEventListener('transitionend', (event) => {
  if (event.propertyName === 'width') {
    console.log('幅のトランジションが終了しました');
  }
});

トランジションが強制終了した場合

トランジションが途中で中断される（例えばdisplay: noneが適用される）と、transitionendイベントは発生しません。

さいごに

transitionendイベントを活用すると、トランジション終了時のタイミングで次の動作を追加したり、スタイルを更新したりすることができるので、インタラクティブなユーザー体験を提供したい場合に非常に役立ちます。