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
完全対応 1
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。
Edge 完全対応 ≤79
完全対応 ≤79
完全対応 ≤79
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。
Firefox 完全対応 51IE 完全対応 10Opera 完全対応 12.1
完全対応 12.1
完全対応 15
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。
未対応 11.6 — 15
代替名
代替名 非標準の名前 oTransitionEnd を使用しています。
Safari 完全対応 6.1
完全対応 6.1
完全対応 4
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。
WebView Android 完全対応 ≤37
完全対応 ≤37
完全対応 1
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。
Chrome Android 完全対応 26
完全対応 26
完全対応 18
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。
Firefox Android 完全対応 51Opera Android 完全対応 12.1
完全対応 12.1
完全対応 14
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。
未対応 12 — 14
代替名
代替名 非標準の名前 oTransitionEnd を使用しています。
Safari iOS 完全対応 7
完全対応 7
完全対応 3.2
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。
Samsung Internet Android 完全対応 1.5
完全対応 1.5
完全対応 1.0
代替名
代替名 非標準の名前 webkitTransitionEnd を使用しています。

凡例

完全対応  
完全対応
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報