HTMLElement: transitionend イベント

transitionend イベントは、 CSS トランジションが完了したときに発生します。トランジションが完了前に削除された場合、例えば transition-property が削除されたり displaynone に設定されたりした場合、このイベントは生成されません。

バブリング あり
キャンセル可能 はい
インターフェイス TransitionEvent
イベントハンドラープロパティ ontransitionend

このコードは、トランジションが定義されており、 transitionend イベントにリスナーを追加している要素を取得します。

const transition = document.querySelector('.transition');

transition.addEventListener('transitionend', () => {
  console.log('トランジション終了');
});

同様に、 ontransitionend を使用した例です。

const transition = document.querySelector('.transition');

transition.ontransitionend = () => {
  console.log('トランジション終了');
};

仕様書

仕様書 状態 備考
CSS Transitions
transitionend の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
transitionend eventChrome 完全対応 26
完全対応 26
完全対応 あり
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。
Edge ? Firefox 完全対応 51IE ? Opera 完全対応 15
完全対応 15
完全対応 あり
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。
Safari 完全対応 ありWebView Android 完全対応 ≤37
完全対応 ≤37
完全対応 あり
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。
Chrome Android 完全対応 26
完全対応 26
完全対応 あり
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。
Firefox Android 完全対応 51Opera Android 完全対応 14
完全対応 14
完全対応 あり
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。
Safari iOS 完全対応 ありSamsung Internet Android 完全対応 1.5
完全対応 1.5
完全対応 あり
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報