TransitionEvent.elapsedTime — Eigenschaft · JavaScript-Referenz

Signatur

TransitionEvent.elapsedTime

Beschreibung

elapsedTime ist eine schreibgeschützte Eigenschaft von TransitionEvent. Sie enthält eine Gleitkommazahl mit der Zeit in Sekunden, die die CSS-Transition bereits lief, als das Ereignis ausgelöst wurde. Eine mit transition-delay festgelegte Verzögerung zählt nicht mit. Gemessen wird nur die Zeit, in der die Transition tatsächlich läuft.

Welcher Wert herauskommt, hängt vom Ereignistyp ab:

transitionend: normalerweise genau der Wert von transition-duration, also die volle Laufzeit.
transitionrun / transitionstart: normalerweise 0. Bei einer negativen Verzögerung (z. B. transition-delay: -0.5s) beginnt die Transition mittendrin. Dann steht hier der übersprungene Anteil, höchstens aber die Gesamtdauer.
transitioncancel: die Zeit, die bis zum Abbruch vergangen ist.

Die Eigenschaft ist nützlich für Logging und Fehlersuche. Außerdem kann man damit prüfen, ob eine Transition vollständig durchlief, und abhängige Abläufe daran ausrichten, zum Beispiel eine Folgeanimation mit passender Restdauer starten. Zusammen mit propertyName und pseudoElement lässt sich genau feststellen, welche Transition an welchem Element wie lange lief.

Rückgabewert

Typ

number

Beschreibung

Gleitkommazahl mit der verstrichenen Laufzeit der Transition in Sekunden, z. B. 0.3. Eine Verzögerung durch transition-delay ist nicht enthalten.

Beispiele

Laufzeit beim Ende einer Transition ausgeben

// CSS: .box { transition: transform 0.4s ease 0.2s; }
const box = document.querySelector('.box');

box.addEventListener('transitionend', (event) => {
  console.log(`${event.propertyName} lief ${event.elapsedTime}s`);
});

// Transition auslösen
requestAnimationFrame(() => {
  box.style.transform = 'translateX(200px)';
});

transform lief 0.4s

Abgebrochene Transitionen erkennen

const panel = document.querySelector('.panel');

panel.addEventListener('transitioncancel', (event) => {
  const total = parseFloat(getComputedStyle(panel).transitionDuration);
  const progress = Math.round((event.elapsedTime / total) * 100);
  console.warn(`Abgebrochen nach ${event.elapsedTime.toFixed(2)}s (${progress} %)`);
});

// Klasse umschalten; wird z. B. display:none gesetzt, bricht die Transition ab
document.querySelector('#toggle').addEventListener('click', () => {
  panel.classList.toggle('open');
});

Abgebrochen nach 0.18s (36 %)

Negative Verzögerung bei transitionstart

// CSS: .bar { transition: width 1s linear -0.25s; }
const bar = document.querySelector('.bar');

bar.ontransitionstart = (event) => {
  // Die Transition beginnt bereits zu 25 % fortgeschritten
  console.log('Start bei', event.elapsedTime, 's');
};

requestAnimationFrame(() => {
  bar.style.width = '100%';
});

Start bei 0.25 s

Synthetisches Event mit Konstruktor

const evt = new TransitionEvent('transitionend', {
  propertyName: 'opacity',
  elapsedTime: 1.5,
  bubbles: true
});

document.body.addEventListener('transitionend', (e) => {
  console.log(e.propertyName, e.elapsedTime);
});

document.body.dispatchEvent(evt);

opacity 1.5

// Wichtig · Fallstricke

Einheit Sekunden, nicht Millisekunden: Für setTimeout oder die Web Animations API muss der Wert mit 1000 multipliziert werden.
Verzögerung zählt nicht mit: Bei transition: opacity 1s 2s meldet transitionend den Wert 1, nicht 3.
Ein Ereignis pro Eigenschaft: Wer mehrere Eigenschaften animiert oder die Kurzschreibweise transition: all benutzt, bekommt mehrere transitionend-Ereignisse mit eigenem elapsedTime. Deshalb nach propertyName filtern.
Ereignisse aus Kind-Elementen: Transition-Ereignisse steigen im DOM nach oben. Mit event.target === element lässt sich ausschließen, dass Ereignisse von Kind-Elementen falsch ausgewertet werden.
Kein transitionend bei Abbruch: Wird die Transition vorzeitig abgebrochen (z. B. durch display: none oder weil die Eigenschaft entfernt wird), wird stattdessen transitioncancel ausgelöst. Dieses Ereignis und transitionrun/transitionstart werden erst seit etwa 2019/2020 von allen großen Browsern unterstützt.
Werte können Gleitkomma-Ungenauigkeiten enthalten. Deshalb vor Vergleichen runden (z. B. mit toFixed()).
Die Eigenschaft ist schreibgeschützt. Bei synthetischen Ereignissen legt man sie über den Konstruktor new TransitionEvent(type, { elapsedTime }) fest.

Siehe auch

MutationEvent.relatedNode TransitionEvent.animation TransitionEvent.propertyName TransitionEvent.pseudoElement AnimationEvent.elapsedTime