Animation: remove イベント
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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
<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
: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();
});
結果
仕様書
| Specification |
|---|
| Web Animations # dom-animation-onremove |
| Web Animations # remove-event |
ブラウザーの互換性
Loading…
関連情報
- ウェブアニメーション API
Animation,AnimationPlaybackEventAnimation.replaceState: アニメーションが削除されたかどうかを確認しますAnimation.persist(): アニメーションが除去されないようにします