SVGAnimationElement: endEvent-Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

Dieses Ereignis kann nicht abgebrochen werden 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 einige Detailinformationen über das Ereignis angibt, abhängig vom Typ des Ereignisses. Für diesen Ereignistyp wird die Wiederholungsnummer für die Animation angegeben.
TimeEvent.view Schreibgeschützt: Ein WindowProxy, der 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 #dddddd;
  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");
});

Ereignishandler-Eigenschaft Äquivalent

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden