Document: transitionstart イベント

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

transitionstart イベントは、 CSS トランジションが実際に始まったとき、すなわち transition-delay が終了した後に発生します。

transitionstarttransitionrun の違いは、 transitionrun がトランジションが生成されたとき (すなわち、待ち時間の開始) に発生するのに対し、 transitionstart は実際にアニメーションが始まったとき (すなわち、待ち時間の終了) に発生することです。

バブリング あり
キャンセル 不可
インターフェイス TransitionEvent
イベントハンドラープロパティ GlobalEventHandlers.ontransitionstart

このイベントの本来の対象は、トランジションが適用された Element です。このイベントを Document インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 HTMLElement: transitionstart イベントを参照してください。

次のコードは transitionstart イベントにリスナーを追加します。

document.addEventListener('transitionrun', () => {
  console.log('Transition is running but hasn't necessarily started transitioning yet');
});

同じですが、 ontransitionstartaddEventListener() の代わりに使用すると次のようになります。

document.ontransitionrun = () => {
  console.log('Transition started running');
};

このイベントのライブデモを参照してください。

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
transitionstart eventChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 53IE ? Opera ? Safari 完全対応 13.1
完全対応 13.1
完全対応 12
無効
無効 From version 12: this feature is behind the Web Animations preference and the CSS Animations via Web Animations preference.
WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 53Opera Android ? Safari iOS 完全対応 13.4
完全対応 13.4
完全対応 12
無効
無効 From version 12: this feature is behind the Web Animations preference and the CSS Animations via Web Animations preference.
Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報