AnimationEvent.pseudoElement — Eigenschaft · JavaScript-Referenz

Signatur

AnimationEvent.pseudoElement

Beschreibung

Die schreibgeschützte Eigenschaft pseudoElement eines AnimationEvent gibt an, ob die auslösende CSS-Animation auf einem Pseudo-Element läuft. Der Wert ist dann ein String, der mit :: beginnt, etwa "::before", "::after" oder "::marker". Läuft die Animation direkt auf dem Element, ist der Wert ein leerer String "".

Wichtig ist das, weil Pseudo-Elemente keine eigenen DOM-Knoten sind. Events wie animationstart, animationiteration, animationend und animationcancel werden deshalb am zugehörigen Element ausgelöst. event.target ist also immer das echte Element. Nur über pseudoElement kannst du unterscheiden, ob die Animation auf dem Element selbst oder auf einem seiner Pseudo-Elemente lief.

In der Praxis brauchst du die Eigenschaft vor allem, wenn ein Element mehrere Animationen hat, z. B. eine Einblend-Animation am Element und eine Lade- oder Puls-Animation auf ::after. Zusammen mit animationName kannst du dann zuverlässig filtern, auf welches Ende du reagieren willst.

Rückgabewert

Typ

string

Beschreibung

Der Name des Pseudo-Elements mit führendem :: (z. B. "::before") oder "", wenn die Animation direkt auf dem Element läuft.

Beispiele

Unterscheiden, ob Element oder Pseudo-Element animiert wurde

// CSS: .badge { animation: pop 0.3s; }
//      .badge::after { animation: pulse 1s; }
const badge = document.querySelector('.badge');

badge.addEventListener('animationend', (event) => {
  const quelle = event.pseudoElement || '(Element selbst)';
  console.log(`${event.animationName} beendet auf ${quelle}`);
});

pop beendet auf (Element selbst) pulse beendet auf ::after

Nur auf das Ende einer ::before-Animation reagieren

// CSS: .loader::before { animation: spin-in 0.5s forwards; }
const loader = document.querySelector('.loader');

const onEnd = (event) => {
  if (event.pseudoElement !== '::before') return;
  loader.classList.add('bereit');
  loader.removeEventListener('animationend', onEnd);
  console.log('Einblendung von ::before abgeschlossen');
};

loader.addEventListener('animationend', onEnd);

Einblendung von ::before abgeschlossen

Synthetisches AnimationEvent mit pseudoElement erzeugen

const el = document.createElement('div');

el.onanimationstart = (event) => {
  console.log(event.animationName, JSON.stringify(event.pseudoElement));
};

// Zum Beispiel für Tests: Event manuell auslösen
const evt = new AnimationEvent('animationstart', {
  animationName: 'fade',
  elapsedTime: 0,
  pseudoElement: '::after'
});
el.dispatchEvent(evt);

// Ohne Angabe ist der Wert ein leerer String
console.log(JSON.stringify(new AnimationEvent('animationend').pseudoElement));

fade "::after" ""

// Wichtig · Fallstricke

Leerer String statt null: Bei Animationen direkt am Element ist der Wert "". Prüfe also mit if (event.pseudoElement) oder vergleiche direkt, nicht mit === null.
target ist nie das Pseudo-Element: event.target zeigt immer auf das echte Element. Ein Pseudo-Element lässt sich nicht als DOM-Knoten ansprechen. Stile kannst du nur über getComputedStyle(el, '::after') lesen.
Bubbling: Animationsevents steigen im DOM auf. Ein Listener am Elternelement empfängt auch die Events von Kindern und deren Pseudo-Elementen. Prüfe deshalb zusätzlich event.target.
Nur schreibgeschützt: Eine Zuweisung wird ignoriert (im Strict Mode gibt es einen TypeError). Setzen kannst du den Wert nur über das Init-Objekt des AnimationEvent-Konstruktors.
Kompatibilität: Ältere WebKit-Versionen kannten nur webkitAnimationEnd ohne diese Eigenschaft. In allen aktuellen Browsern wird sie unterstützt.

Siehe auch

AnimationEvent AnimationEvent.animationName AnimationEvent.elapsedTime TransitionEvent.pseudoElement AnimationEvent.animation