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

イベントプロパティ

以下に挙げたプロパティに加え、親インターフェイスである 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

関連情報