ViewTransitionTypeSet — Schnittstelle · JavaScript-Referenz

Signatur

interface ViewTransitionTypeSet

Beschreibung

ViewTransitionTypeSet gehört zur View Transition API und steht für die Menge der Typen einer gerade laufenden View Transition. Du bekommst das Objekt nicht über einen Konstruktor, sondern über die Eigenschaft types eines ViewTransition-Objekts, z. B. document.startViewTransition(...).types oder bei seitenübergreifenden Übergängen über event.viewTransition.types in den Events pageswap und pagereveal.

Typen sind einfache Zeichenketten wie "forwards", "backwards" oder "reload". Im CSS kannst du sie mit der Pseudoklasse :active-view-transition-type(typ) abfragen und so je nach Situation unterschiedliche Animationen für denselben Übergang festlegen, etwa „nach links schieben“ beim Vorwärtsnavigieren und „nach rechts schieben“ beim Zurückgehen. Das spart dir Hilfsklassen auf <html>, die du sonst selbst setzen und wieder entfernen müsstest.

Das Interface ist set-ähnlich (setlike) und lässt sich ändern. Es bietet dieselben Methoden wie ein Set: add(), delete(), clear(), has(), forEach(), entries(), keys(), values(), die Eigenschaft size und [Symbol.iterator](). Wenn du Typen während eines laufenden Übergangs änderst, wertet der Browser die passenden CSS-Selektoren sofort neu aus.

Die Anfangstypen gibst du entweder beim Aufruf mit document.startViewTransition({ update, types: [...] }) an oder bei seitenübergreifenden Übergängen per CSS-Regel @view-transition { navigation: auto; types: ...; }.

Rückgabewert

Typ

ViewTransitionTypeSet

Beschreibung

Wird über ViewTransition.types gelesen. Die Einträge sind Zeichenketten (string), size gibt die Anzahl der aktiven Typen an.

Beispiele

Typen beim Start eines Übergangs festlegen und auslesen

const zeigeSeite = (inhalt) => {
  document.querySelector('#app').innerHTML = inhalt;
};

const transition = document.startViewTransition({
  update: () => zeigeSeite('<h1>Seite 2</h1>'),
  types: ['slide', 'forwards']
});

// transition.types ist ein ViewTransitionTypeSet
console.log(transition.types.size);
console.log(transition.types.has('forwards'));
console.log([...transition.types]);

2 true ["slide", "forwards"]

Richtung abhängig machen und in CSS darauf reagieren

/* CSS:
html:active-view-transition-type(forwards) {
  &::view-transition-old(root) { animation-name: slide-out-left; }
  &::view-transition-new(root) { animation-name: slide-in-right; }
}
html:active-view-transition-type(backwards) {
  &::view-transition-old(root) { animation-name: slide-out-right; }
  &::view-transition-new(root) { animation-name: slide-in-left; }
}
*/

let aktuellerIndex = 0;

const geheZu = async (index, render) => {
  if (!document.startViewTransition) {
    render();
    return;
  }
  const richtung = index > aktuellerIndex ? 'forwards' : 'backwards';
  aktuellerIndex = index;

  const transition = document.startViewTransition({ update: render, types: [richtung] });
  await transition.finished;
  console.log(`Übergang "${richtung}" abgeschlossen`);
};

geheZu(1, () => { document.body.dataset.seite = '1'; });

Übergang "forwards" abgeschlossen

Typen bei seitenübergreifender Navigation dynamisch setzen

/* CSS auf beiden Seiten:
@view-transition { navigation: auto; }
*/

window.addEventListener('pagereveal', (event) => {
  if (!event.viewTransition) return;

  const types = event.viewTransition.types;
  const nav = navigation.activation;

  if (nav?.navigationType === 'reload') {
    types.add('reload');
  } else if (nav?.navigationType === 'traverse' &&
             nav.entry.index < nav.from?.index) {
    types.add('backwards');
  } else {
    types.add('forwards');
  }

  types.forEach((typ) => console.log('Aktiver Typ:', typ));
});

Aktiver Typ: forwards

Typen während des Übergangs austauschen

const transition = document.startViewTransition({
  update: () => document.body.classList.toggle('dunkel'),
  types: ['theme']
});

// Bei reduzierter Bewegung die aufwendige Animation abschalten
if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
  transition.types.clear();
  transition.types.add('instant');
}

console.log([...transition.types.values()]);

["theme"] // bzw. ["instant"] bei reduzierter Bewegung

// Wichtig · Fallstricke

Browser-Kompatibilität: View-Transition-Typen gibt es in Chromium ab Version 125 und in Safari ab 18.2. Firefox unterstützt sie erst in neueren Versionen. Prüfe vorher mit if (document.startViewTransition) und sieh eine Ausweichlösung ohne Animation vor. Ältere Chromium-Versionen akzeptieren nur startViewTransition(callback) und ignorieren die Objektform mit types.
Es gibt keinen Konstruktor. new ViewTransitionTypeSet() löst einen TypeError aus. Das Objekt bekommst du nur über ViewTransition.types.
Typen sind nur während der aktiven Transition gültig. Nach finished passt :active-view-transition-type() nicht mehr, du musst also nichts aufräumen.
Typnamen folgen den Regeln für CSS-Bezeichner (<custom-ident>). Namen mit dem Präfix -ua- oder das Schlüsselwort none werden ignoriert. Groß- und Kleinschreibung zählt.
Bei seitenübergreifenden Übergängen laufen die Typen der alten Seite (pageswap) und der neuen Seite (pagereveal) getrennt voneinander. Setze sie deshalb auf der Seite, deren CSS sie auswerten soll.
Das Objekt ist ein Set-ähnliches Objekt, aber keine Instanz von Set. instanceof Set ergibt false, und neuere Set-Methoden wie union() fehlen. Wandle es bei Bedarf mit new Set(types) oder [...types] um.

Siehe auch

Set ViewTransition CSSViewTransitionRule PageTransitionEvent TransitionEvent