transitionend ( ontransitionend )イベント
transitionend ( ontransitionend )イベントは、 transitionプロパティによる CSS アニメーションの実行が完了したら発生するイベントです。
document.getElementById('example').addEventListener("transitionend", (event)=>{
console.log( 'event type : ' + event.type );
});
詳しくは Example を参照してください
CSSアニメーションが途中でウィンドウを閉じるなどをして破棄された場合はtransitionendイベントは実行されません。
イベントリスナーの設定は、addEventListener()だけです。
ページ内 Index
Syntax
in JavaScript
object.addEventListener("transitionend", script_);
備考（Remarks）
| Bubbles | Yes |
| Cancelable | Yes |
| Interface | TransitionEvent |
Example
transitionend ( ontransitionend )イベントの例です。
以下の例で、CSS アニメーションが動いている途中でポインターをエレメントから外してください。すると、CSS アニメーションは中断します。
終了すると transitionend イベントが発生します。
transition による CSS アニメーションに関連するイベント
| イベント | 概要 |
|---|---|
| ontransitioncancel | CSS アニメーションの効果が中断されたら |
| ontransitionend | CSS アニメーションが終了したら |
| ontransitionrun | CSS アニメーションが始まったら。遅滞時間の間は発生しない |
| ontransitionstart | 遅滞時間に関係なく、設定された CSS アニメーションが始まったら |