transitionend

トランジションエンド（イベント）

意味 CSSトランジションが終了したときのイベント。

transitionendとは？

CSSトランジションが終了したときに発火するイベント。トランジションの終了を検出するのに使用します。

transitionendの具体的な使い方

トランジション終了イベントを検知する例

<div id="box" style="width: 100px; height: 100px; background-color: red; transition: all 1s;">ボックス</div>
<button onclick="startTransition()">トランジション開始</button>

<script>
function startTransition() {
  const box = document.getElementById('box');
  box.style.width = '200px';
  box.style.height = '200px';
  box.style.backgroundColor = 'blue';

  box.addEventListener('transitionend', function(event) {
    alert(`トランジション終了: ${event.propertyName}`);
  });
}
</script>

ボックス要素にトランジションを適用し、トランジションが終了したときにアラートを表示します。トランジションが終了した各プロパティ名がアラートに表示されます。

transitionendに関するよくある質問

Q. transitionendとは何ですか？

A. transitionendは、CSSトランジションが完全に終了したときに発火するイベントです。このイベントを利用することで、トランジションの完了を検知し、その後の処理を実行することができます。

Q. 複数のプロパティがある場合は？

A. 複数のプロパティに対してトランジションが適用されている場合、各プロパティのトランジションが終了するたびにtransitionendイベントが発火します。全てのトランジションの完了を待つ場合は、イベントの回数を管理する必要があります。

Q. ブラウザの互換性は？

A. transitionendイベントは、現代的なブラウザでは広くサポートされていますが、非常に古いブラウザでは動作しない可能性があります。クロスブラウザ対応が必要な場合は、ベンダープレフィックスを使用するか、ポリフィルを利用することをおすすめします。

transitionendが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのtransitionendやcontextmenu、animationstart、event.target、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。