TransitionEvent.pseudoElement — Eigenschaft · JavaScript-Referenz

Signatur

TransitionEvent.pseudoElement

Beschreibung

Die Eigenschaft pseudoElement eines TransitionEvent gibt an, ob die auslösende CSS-Transition auf einem Pseudo-Element läuft, zum Beispiel ::before, ::after oder ::marker. Der Wert beginnt immer mit ::. Läuft die Transition direkt auf dem Element, ist der Wert ein leerer String ("").

Das ist wichtig, weil man Pseudo-Elemente nicht als eigene DOM-Knoten ansprechen kann. Transition-Events eines Pseudo-Elements werden deshalb auf dem Ursprungselement ausgelöst. event.target zeigt also auf das Host-Element. Nur über pseudoElement erfahren Sie, ob die Transition tatsächlich vom Element selbst oder von einem seiner Pseudo-Elemente stammt.

Typischer Einsatz: Sie unterscheiden in Handlern für transitionrun, transitionstart, transitionend und transitioncancel, welche Transition gerade fertig ist. Das ist nützlich, wenn Element und Pseudo-Element dieselbe Eigenschaft animieren (etwa opacity). Dann reicht propertyName allein nicht aus, um die Events auseinanderzuhalten.

Rückgabewert

Typ

string

Beschreibung

Der Name des Pseudo-Elements mit führendem :: (z. B. "::after") oder ein leerer String, wenn die Transition auf dem Element selbst läuft.

Beispiele

Transitions von Element und ::after unterscheiden

// Stil einfügen: Button und sein ::after-Pseudo-Element haben beide eine Transition
const style = document.createElement('style');
style.textContent = `
  .btn { opacity: 0.5; transition: opacity 0.3s; }
  .btn::after { content: ' →'; opacity: 0; transition: opacity 0.6s; }
  .btn.aktiv { opacity: 1; }
  .btn.aktiv::after { opacity: 1; }
`;
document.head.append(style);

const btn = document.createElement('button');
btn.className = 'btn';
btn.textContent = 'Weiter';
document.body.append(btn);

btn.addEventListener('transitionend', (event) => {
  const quelle = event.pseudoElement || '(Element selbst)';
  console.log(`${event.propertyName} fertig auf ${quelle} nach ${event.elapsedTime}s`);
});

// Transition nach dem ersten Rendern auslösen
requestAnimationFrame(() => requestAnimationFrame(() => btn.classList.add('aktiv')));

opacity fertig auf (Element selbst) nach 0.3s opacity fertig auf ::after nach 0.6s

Nur auf das Ende der Pseudo-Element-Animation reagieren

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

const onTooltipEnd = (event) => {
  // Transitions des Elements selbst ignorieren
  if (event.pseudoElement !== '::before') return;
  console.log('Tooltip-Pfeil ist vollständig eingeblendet');
  tooltip.removeEventListener('transitionend', onTooltipEnd);
};

tooltip.addEventListener('transitionend', onTooltipEnd);
tooltip.classList.add('sichtbar');

Tooltip-Pfeil ist vollständig eingeblendet

TransitionEvent synthetisch erzeugen (z. B. für Tests)

const event = new TransitionEvent('transitionend', {
  propertyName: 'transform',
  elapsedTime: 0.25,
  pseudoElement: '::marker'
});

console.log(event.pseudoElement);
console.log(new TransitionEvent('transitionend').pseudoElement === '');

::marker true

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an event.pseudoElement wird ignoriert. Im Strict Mode wirft sie einen TypeError. Einen eigenen Wert können Sie nur über das pseudoElement-Feld im Konstruktor new TransitionEvent() setzen.
event.target ist nie das Pseudo-Element: Es zeigt immer auf das Ursprungselement. Wenn Sie nur nach target filtern, können Transitions des Pseudo-Elements unbemerkt Ihre Logik auslösen, etwa ein vorzeitiges Entfernen des Elements nach transitionend.
Leerer String statt null: Ohne Pseudo-Element ist der Wert "". Eine Prüfung wie if (event.pseudoElement) reicht daher aus.
Event-Bubbling: Transition-Events steigen im DOM auf. Ein Listener auf einem Container empfängt also auch Events von Kind-Elementen und deren Pseudo-Elementen. Kombinieren Sie deshalb event.target und pseudoElement.
Kompatibilität: Wird in allen aktuellen Browsern (Chrome, Edge, Firefox, Safari) unterstützt. Sehr alte WebKit-Versionen kannten nur das Präfix-Event webkitTransitionEnd ohne diese Eigenschaft.

Siehe auch

TransitionEvent TransitionEvent.propertyName TransitionEvent.elapsedTime AnimationEvent.pseudoElement getComputedStyle() NavigateEvent.sourceElement