HTMLElement: transitionend イベント
transitionend
イベントは、 CSS トランジションが完了したときに発生します。トランジションが完了前に削除された場合、例えば transition-property
が削除されたり display
が none
に設定されたりした場合、このイベントは生成されません。
バブリング | あり |
---|---|
キャンセル可能 | はい |
インターフェイス | 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 の定義 |
草案 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
関連情報
GlobalEventHandlers.ontransitionend
イベントハンドラーTransitionEvent
インターフェイス- CSS プロパティ:
transition
,transition-delay
,transition-duration
,transition-property
,transition-timing-function
- 関連イベント:
transitionrun
,transitionstart
,transitioncancel
Document
に対するこのイベント:transitionend
Window
に対するこのイベント:transitionend