Signatur
Beschreibung
Die Eigenschaft target eines KeyframeEffect verweist auf das DOM-Element, das durch den Effekt animiert wird. Soll ein Pseudo-Element wie ::before oder ::after animiert werden, bleibt target das Ursprungselement. Das Pseudo-Element selbst wird dann über die zusätzliche Eigenschaft pseudoElement festgelegt.
Die Eigenschaft ist beschreibbar. Deshalb kann man einen fertig konfigurierten Effekt (Keyframes, Dauer, Easing) zur Laufzeit einem anderen Element zuweisen, ohne eine neue Animation anzulegen. Das läuft sogar während der Wiedergabe: Der aktuelle Fortschritt bleibt erhalten, nur das Ziel ändert sich.
Der Wert kann auch null sein. Ein Effekt ohne Ziel läuft zeitlich ganz normal weiter (Ereignisse, currentTime, finished-Promise), zeigt aber nichts an. So lassen sich Effekte zuerst anlegen und erst später an ein Element binden, etwa nachdem es ins DOM eingefügt wurde.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | Element | null | Beim Setzen: das neue Zielelement oder null, um den Effekt vom Element zu lösen. |
Rückgabewert
null, wenn der Effekt kein Ziel hat. Bei Pseudo-Elementen ist es das Ursprungselement (siehe pseudoElement).Beispiele
Ziel eines Effekts auslesen
const box = document.querySelector('#box');
const effect = new KeyframeEffect(
box,
[{ opacity: 0 }, { opacity: 1 }],
{ duration: 500, fill: 'forwards' }
);
const animation = new Animation(effect, document.timeline);
animation.play();
console.log(effect.target === box);
console.log(animation.effect.target.id);Laufende Animation auf ein anderes Element umhängen
const items = [...document.querySelectorAll('.tab')];
const highlight = new KeyframeEffect(
items[0],
[{ backgroundColor: '#fff' }, { backgroundColor: '#ffe08a' }],
{ duration: 800, iterations: Infinity, direction: 'alternate' }
);
const anim = new Animation(highlight);
anim.play();
// Beim Klick wandert das Pulsieren zum angeklickten Tab
items.forEach((item) => {
item.addEventListener('click', () => {
highlight.target = item;
});
});Effekt ohne Ziel anlegen und später binden
const effect = new KeyframeEffect(
null,
[{ transform: 'translateY(20px)', opacity: 0 }, { transform: 'none', opacity: 1 }],
{ duration: 300, easing: 'ease-out' }
);
console.log(effect.target);
const toast = document.createElement('div');
toast.textContent = 'Gespeichert!';
document.body.append(toast);
effect.target = toast;
await new Animation(effect).play?.();
console.log(effect.target.textContent);Pseudo-Element animieren
const button = document.querySelector('button');
const effect = new KeyframeEffect(
button,
[{ opacity: 0 }, { opacity: 1 }],
{ duration: 400, pseudoElement: '::after' }
);
new Animation(effect).play();
console.log(effect.target.tagName, effect.pseudoElement);// Wichtig · Fallstricke
- Pseudo-Elemente:
targetgibt nie ein Pseudo-Element zurück, sondern immer das Ursprungselement. Welches Pseudo-Element gemeint ist, steht inKeyframeEffect.pseudoElement, das man für einen vollständigen Vergleich zusätzlich prüfen muss. - Bei
nullgibt es keinen Fehler und keine sichtbare Änderung. Die Animation läuft still weiter und löst weiterhinfinish-Ereignisse aus. - Wird
targetumgesetzt, verschwinden die animierten Stile sofort vom alten Element, auch wennfill: 'forwards'gesetzt ist. Soll der Endzustand erhalten bleiben, vorheranimation.commitStyles()aufrufen. - Bei Animationen, die mit
Element.animate()erstellt wurden, zeigtanimation.effect.targetauf das aufrufende Element. Bei CSS-Animationen und -Übergängen (CSSAnimation/CSSTransition) ist das Ziel durch CSS festgelegt und sollte nicht per Skript geändert werden. - Kompatibilität: Chrome/Edge 84+, Firefox 63+, Safari 14+. In älteren Browsern ist
targetteilweise nur lesbar oder fehlt ganz, dann hilft das Polyfillweb-animations-js.