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 March 2020.
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 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- ウェブアニメーション API
Animation
,AnimationPlaybackEvent
Animation.replaceState
: アニメーションが削除されたかどうかを確認しますAnimation.persist()
: アニメーションが除去されないようにします