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 2020年3月.
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 |
ブラウザーの互換性
Loading…