Animation: remove イベント

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

<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> 

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

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(); });