TransitionEvent.propertyName — Eigenschaft · JavaScript-Referenz

Signatur

TransitionEvent.propertyName

Beschreibung

Die Eigenschaft propertyName gibt es auf jedem TransitionEvent, also bei den Events transitionrun, transitionstart, transitionend und transitioncancel. Sie enthält den Namen der CSS-Eigenschaft, deren Übergang das Event ausgelöst hat. Der Name steht in CSS-Schreibweise mit Bindestrichen ("background-color") und nicht in camelCase wie bei style.backgroundColor.

Wichtig ist das vor allem, wenn auf einem Element mehrere Eigenschaften gleichzeitig animiert werden, etwa mit transition: opacity .3s, transform .5s. Dann wird für jede Eigenschaft ein eigenes transitionend ausgelöst. Mit propertyName filtert man das Event heraus, auf das man wirklich reagieren will. So läuft Folgelogik wie Aufräumen oder das Entfernen aus dem DOM nur einmal und zum richtigen Zeitpunkt.

Bei Kurzschreibweisen (Shorthands) wie padding, border oder margin meldet der Browser die einzelnen Langform-Eigenschaften, also "padding-top", "padding-left" usw. Bei transition: all kommt ebenfalls je Eigenschaft ein eigenes Event mit dem echten Namen, nie "all".

Rückgabewert

Typ

string

Beschreibung

Der Name der CSS-Eigenschaft in Bindestrich-Schreibweise, z. B. "opacity", "transform" oder "border-top-color". Bei eigenen Properties steht dort der Name mit Präfix, z. B. "--progress". Bei einem mit dem Konstruktor erzeugten Event ohne Angabe ist es ein leerer String.

Beispiele

Nur auf das Ende einer bestimmten Transition reagieren

// CSS: .toast { transition: opacity .3s, transform .5s; }
const toast = document.querySelector('.toast');

const onEnd = (event) => {
  // Es gibt zwei transitionend-Events – nur auf transform reagieren
  if (event.propertyName !== 'transform') return;
  toast.removeEventListener('transitionend', onEnd);
  toast.remove();
  console.log('Toast entfernt nach:', event.propertyName);
};

toast.addEventListener('transitionend', onEnd);
toast.classList.add('is-hiding');

Toast entfernt nach: transform

Alle Transitions eines Elements protokollieren

// CSS: .box { transition: all .4s; } .box.big { width: 300px; padding: 20px; }
const box = document.querySelector('.box');

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

box.classList.add('big');

width fertig nach 0.4s padding-top fertig nach 0.4s padding-right fertig nach 0.4s padding-bottom fertig nach 0.4s padding-left fertig nach 0.4s

Promise-Helfer, der auf eine bestimmte Eigenschaft wartet

const waitForTransition = (el, property) =>
  new Promise((resolve) => {
    const handler = (event) => {
      // Events von Kind-Elementen (Bubbling) ignorieren
      if (event.target !== el || event.propertyName !== property) return;
      el.removeEventListener('transitionend', handler);
      el.removeEventListener('transitioncancel', handler);
      resolve(event.type);
    };
    el.addEventListener('transitionend', handler);
    el.addEventListener('transitioncancel', handler);
  });

const panel = document.querySelector('.panel');
panel.classList.add('open');
const result = await waitForTransition(panel, 'opacity');
console.log('Panel-Übergang:', result);

Panel-Übergang: transitionend

Synthetisches Event mit dem Konstruktor erzeugen

const event = new TransitionEvent('transitionend', {
  propertyName: 'opacity',
  elapsedTime: 0.3,
  bubbles: true
});
console.log(event.propertyName);

opacity

// Wichtig · Fallstricke

Kurzschreibweisen: Ein Vergleich mit 'padding', 'border' oder 'margin' trifft nie zu. Man muss auf eine konkrete Langform-Eigenschaft wie 'padding-top' prüfen.
Keine camelCase-Namen: Der Wert lautet 'background-color', nicht 'backgroundColor'.
Bubbling: transitionend steigt im DOM auf. Transitions von Kind-Elementen kommen also auch beim Elternelement an. Deshalb zusätzlich event.target prüfen.
Kein Event garantiert: Wird die Transition abgebrochen, bekommt das Element display: none oder wird es entfernt, kommt kein transitionend. Stattdessen feuert eventuell transitioncancel. Bei wichtiger Logik sollte man einen Fallback per Timeout einplanen.
Eigene Properties: Mit @property registrierte Custom Properties lassen sich animieren. Sie erscheinen mit ihrem Namen, z. B. '--angle'.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Sehr alte WebKit-Versionen nutzten webkitTransitionEnd mit Präfix, das ist heute nicht mehr nötig.

Siehe auch

TransitionEvent TransitionEvent.elapsedTime TransitionEvent.pseudoElement AnimationEvent.animationName PageTransitionEvent.persisted