Signatur
Beschreibung
Das Ereignis endEvent gehört zur Schnittstelle SVGAnimationElement. Es wird ausgelöst, wenn eine SMIL-Animation wie <animate>, <animateMotion>, <animateTransform> oder <set> das Ende ihrer aktiven Dauer erreicht, also nach Ablauf aller Wiederholungen (repeatCount/repeatDur) oder zu einem über das Attribut end festgelegten Zeitpunkt.
Einen Handler registrierst du entweder mit addEventListener("endEvent", handler) oder über die Eigenschaft onend bzw. das gleichnamige Markup-Attribut onend="…". Das übergebene Ereignisobjekt ist ein TimeEvent. Es bietet unter anderem detail und view. Das Ereignis steigt nicht im DOM-Baum auf (keine Bubbling-Phase) und lässt sich nicht abbrechen.
Typische Einsatzfälle sind das Verketten von Animationen (die nächste startet per beginElement()), das Aufräumen oder Entfernen von Elementen nach einer Einblend- oder Ausblend-Animation und das Aktualisieren des Zustands der Bedienoberfläche, zum Beispiel einen Button wieder aktivieren. Für reine SVG-Verkettungen reicht oft schon deklarativ begin="andereAnimation.end", ganz ohne JavaScript.
Das Ereignis feuert sowohl bei normalem (geplantem oder interaktivem) Ablauf der Zeitachse als auch dann, wenn die Animation per DOM-Methode wie endElement() beendet wird. Am einfachen Ende jeder einzelnen Wiederholung wird es dagegen nicht ausgelöst, dafür gibt es repeatEvent.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Ereignistyp, exakt "endEvent" (Groß-/Kleinschreibung beachten). Bei der Handler-Eigenschaft heißt es dagegen onend. |
|
| $handler Pflicht | (event: TimeEvent) => void | Callback, das beim Ende der aktiven Dauer aufgerufen wird. Er erhält ein TimeEvent mit target (dem Animationselement), detail und view. |
|
| $options | boolean | AddEventListenerOptions | false | Optionen wie once, signal oder capture, wie bei addEventListener üblich. |
Rückgabewert
addEventListener gibt nichts zurück. Der Handler erhält ein TimeEvent-Objekt.Beispiele
Ende einer Animation mit addEventListener erkennen
const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '100');
const rect = document.createElementNS(NS, 'rect');
rect.setAttribute('width', '20');
rect.setAttribute('height', '20');
rect.setAttribute('fill', 'teal');
const anim = document.createElementNS(NS, 'animate');
anim.setAttribute('attributeName', 'x');
anim.setAttribute('from', '0');
anim.setAttribute('to', '180');
anim.setAttribute('dur', '1s');
anim.setAttribute('repeatCount', '2');
anim.setAttribute('fill', 'freeze');
anim.addEventListener('beginEvent', () => console.log('Animation gestartet'));
anim.addEventListener('repeatEvent', (e) => console.log('Wiederholung', e.detail));
anim.addEventListener('endEvent', (e) => {
console.log('Animation beendet:', e.type, e.target.localName);
});
rect.append(anim);
svg.append(rect);
document.body.append(svg);Handler über die onend-Eigenschaft setzen und wieder entfernen
// <svg><circle r="10" cx="20" cy="20"><animate id="pulse" attributeName="r" from="10" to="18" dur="0.5s" begin="indefinite"/></circle></svg>
const pulse = document.getElementById('pulse');
pulse.onend = () => {
console.log('Puls fertig');
pulse.onend = null; // Handler nach dem ersten Mal entfernen
};
pulse.beginElement();Animationen verketten und Listener mit removeEventListener abmelden
// <svg> mit zwei Animationen: #fadeOut (begin="indefinite") und #slideIn (begin="indefinite")
const fadeOut = document.getElementById('fadeOut');
const slideIn = document.getElementById('slideIn');
const button = document.querySelector('#start');
const onFadeEnd = () => {
slideIn.beginElement(); // Folgeanimation starten
fadeOut.removeEventListener('endEvent', onFadeEnd);
};
button.addEventListener('click', () => {
button.disabled = true;
fadeOut.addEventListener('endEvent', onFadeEnd);
slideIn.addEventListener('endEvent', () => {
button.disabled = false;
console.log('Sequenz abgeschlossen');
}, { once: true });
fadeOut.beginElement();
});Auf das Ende als Promise warten
const waitForEnd = (animEl) =>
new Promise((resolve) => {
animEl.addEventListener('endEvent', resolve, { once: true });
});
const run = async () => {
const anim = document.querySelector('#grow');
anim.beginElement();
const evt = await waitForEnd(anim);
console.log('Fertig nach', anim.getCurrentTime().toFixed(1), 's Dokumentzeit');
};
run();