SVGAnimationElement: endEvent Ereignis

Das endEvent Ereignis der SVGAnimationElement Schnittstelle wird ausgelöst, wenn das aktive Ende der Animation erreicht ist.

Hinweis: Dieses Ereignis wird nicht am einfachen Ende jeder Animationswiederholung ausgelöst. Es kann sowohl im Verlauf der normalen (d.h. geplanten oder interaktiven) Timeline-Wiedergabe als auch, wenn das Element mit einer DOM-Methode beendet wurde, ausgelöst werden.

Dieses Ereignis ist nicht abbrechbar und wird nicht gebubbelt.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

js
addEventListener("endEvent", (event) => {});

onend = (event) => {};

Ereignistyp

Ereigniseigenschaften

TimeEvent.detail Schreibgeschützt

Ein long, das einige Detailinformationen über das Ereignis angibt, abhängig vom Typ des Ereignisses. Bei diesem Ereignistyp zeigt es die Wiederholungsnummer der Animation an.

TimeEvent.view Schreibgeschützt

Ein WindowProxy, das das Fenster identifiziert, aus dem das Ereignis generiert wurde.

Beispiele

Animierter Kreis

html
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
  <title>SVG SMIL Animate with Path</title>
  <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

<hr />

<button>Stop animation</button>

<ul></ul>
css
ul {
  height: 100px;
  border: 1px solid #ddd;
  overflow-y: scroll;
  padding: 10px 30px;
}
js
let svgElem = document.querySelector("svg");
let animateElem = document.querySelector("animateMotion");
let list = document.querySelector("ul");
let btn = document.querySelector("button");

animateElem.addEventListener("beginEvent", () => {
  let listItem = document.createElement("li");
  listItem.textContent = "beginEvent fired";
  list.appendChild(listItem);
});

animateElem.addEventListener("endEvent", () => {
  let listItem = document.createElement("li");
  listItem.textContent = "endEvent fired";
  list.appendChild(listItem);
});

animateElem.addEventListener("repeatEvent", (e) => {
  let listItem = document.createElement("li");
  let msg = "repeatEvent fired";
  if (e.detail) {
    msg += `; repeat number: ${e.detail}`;
  }
  listItem.textContent = msg;
  list.appendChild(listItem);
});

btn.addEventListener("click", () => {
  btn.disabled = true;
  animateElem.setAttribute("repeatCount", "1");
});

Äquivalent zur Ereignishandler-Eigenschaft

Beachten Sie, dass Sie auch einen Ereignislistener für das end Ereignis mit der onend Ereignishandler-Eigenschaft erstellen können:

js
animateElem.onend = () => {
  console.log("endEvent fired");
};

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# EndEvent

Browser-Kompatibilität

Siehe auch