Animation: remove イベント

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

remove は Animation インターフェイスのイベントで、アニメーションが自動的に除去された時にブラウザーによって発生します。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("finish", (event) => { })
onfinish = (event) => { }

イベント型

AnimationPlaybackEvent です。 Event から継承しています。

イベントプロパティ

以下に挙げたプロパティに加え、親インターフェイスである Event から継承したプロパティが利用できます。

AnimationPlaybackEvent.currentTime 読取専用: イベントを生成したアニメーションの現在時刻。
AnimationPlaybackEvent.timelineTime 読取専用: イベントを生成したアニメーションのタイムラインの時刻値。

この例では、 <button id="start"> 要素と、マウスが移動するたびに実行するイベントリスナーがあります。 mousemove イベントハンドラーは <button> をマウスポインターの位置にアニメーションさせるアニメーションを設定します。これは巨大なアニメーションリストになり、メモリーリークを作成する可能性があります。このため、現代のブラウザーでは、他のアニメーションによってオーバーライドされた前方充填アニメーションは自動的に除去されます。

作成したアニメーションの数が表示されます。 remove イベントリスナーを使用して、除去されたアニメーションの数をカウントして表示します。

アニメーションの 1 つを除いて、最終的にはすべて除去されるはずです。

HTML

html

<button id="start">クリックでドラッグ</button>
<br />
<button id="reset">例をリセット</button>
<p>
 ボタンをクリックするとアニメーションが始まります(既定では、このようなアニメーションを体験すると偏頭痛に悩まされる人を保護するために無効になっています)。
</p>
<p>Animations created: <span id="count-created">0</span></p>
<p>Animations removed: <span id="count-removed">0</span></p>

CSS

css

:root,
body {
 margin: 0;
 padding: 0;
 height: 100%;
}
button {
 margin: 0.5rem 0;
}

JavaScript

const button = document.querySelector("#start");
let created = 0;
let removed = 0;
button.addEventListener(
 "click",
 () => {
 document.body.addEventListener("mousemove", (event) => {
 const animation = button.animate(
 { transform: `translate(${event.clientX}px, ${event.clientY}px)` },
 { duration: 500, fill: "forwards" },
 );
 created++;
 showCounts();
 // アニメーションが除去された後、 remove イベントが発生
 animation.addEventListener("remove", () => {
 removed++;
 showCounts();
 });
 });
 },
 { once: true },
);
function showCounts() {
 document.getElementById("count-created").textContent = created;
 document.getElementById("count-removed").textContent = removed;
}
const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
 document.location.reload();
});