Animation: cancel イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
cancel
は Animation
インターフェイスのイベントで、Animation.cancel()
メソッドが呼び出された時や、アニメーションの再生が完了する前に要素から除去された時など、アニメーションが他の状態から "idle"
再生状態になった時に発行されます。
メモ:
最初からアイドル状態で新しいアニメーションを作成しても、新しいアニメーションの cancel
イベントは発生しません。
構文
このイベント名を addEventListener()
などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("cancel", (event) => { })
oncancel = (event) => { }
イベント型
AnimationPlaybackEvent
です。 Event
から継承しています。
イベントプロパティ
以下に挙げたプロパティに加え、親インターフェイスである Event
から継承したプロパティが利用できます。
AnimationPlaybackEvent.currentTime
読取専用-
イベントを生成したアニメーションの現在時刻。
AnimationPlaybackEvent.timelineTime
読取専用-
イベントを生成したアニメーションのタイムラインの時刻値。
例
アニメーションがキャンセルされた場合、それを要素から除去します。
js
animation.oncancel = (event) => {
animation.effect.target.remove();
};
仕様書
Specification |
---|
Web Animations # dom-animation-oncancel |
Web Animations # cancel-event |
ブラウザーの互換性
BCD tables only load in the browser