SVGAnimationElement: endEvent event

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. Dieses Ereignis kann sowohl im Verlauf des normalen (d.h. geplanten oder interaktiven) Zeitachsenverlaufs als auch im Fall, dass 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.

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

onend = (event) => {};

Ereignistyp

Ein TimeEvent. Erbt von Event.

Ereigniseigenschaften

TimeEvent.detail Schreibgeschützt: Ein long, der abhängig vom Ereignistyp einige Detailinformationen über das Ereignis angibt. Für diesen Ereignistyp gibt er die Wiederholungsnummer der Animation an.
TimeEvent.view Schreibgeschützt: Ein WindowProxy, das das Fenster identifiziert, aus dem das Ereignis erstellt 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;
}

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

Äquivalentes Ereignishandler-Property

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

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # EndEvent