ViewTransition.types — Eigenschaft · JavaScript-Referenz

Signatur

ViewTransition.types

Beschreibung

Die Eigenschaft types einer ViewTransition gibt ein ViewTransitionTypeSet zurück. Das ist ein Set-ähnliches Objekt mit Methoden wie add(), delete(), has(), clear() und forEach() und lässt sich mit for...of durchlaufen. Es enthält Zeichenketten, die die Art der Transition beschreiben, z. B. "forwards", "backwards" oder "slide".

Solche Typen werden meist beim Start mitgegeben, etwa mit document.startViewTransition({ update, types: ["forwards"] }) oder in CSS über @view-transition { types: ... } bei dokumentübergreifenden Transitionen. Im CSS sprechen Sie sie mit dem Pseudoklassen-Selektor :active-view-transition-type(forwards) an und können so je nach Typ unterschiedliche Animationen festlegen, ohne Klassen am <html>-Element umzuschalten.

Schreibgeschützt ist nur die Eigenschaft selbst: Sie können ihr kein neues Set zuweisen. Den Inhalt des Sets dürfen Sie aber jederzeit ändern. Das ist vor allem bei dokumentübergreifenden Transitionen hilfreich, wenn Sie in den Events pageswap oder pagereveal je nach Navigationsrichtung einen passenden Typ setzen.

Rückgabewert

Typ

ViewTransitionTypeSet

Beschreibung

Ein Set-ähnliches Objekt mit Typen als Zeichenketten (string). Wenn Sie es ändern, werden die passenden :active-view-transition-type()-Selektoren sofort neu ausgewertet.

Beispiele

Typen beim Start setzen und auslesen

const renderPage = (n) => {
  document.querySelector('#content').textContent = `Seite ${n}`;
};

const transition = document.startViewTransition({
  update: () => renderPage(2),
  types: ['forwards', 'slide']
});

console.log([...transition.types]);
console.log(transition.types.has('slide'));

["forwards", "slide"] true

Typ nachträglich per JavaScript ändern

const navigate = (direction, update) => {
  const transition = document.startViewTransition(update);
  // Die Eigenschaft ist schreibgeschützt, das Set darf aber geändert werden
  transition.types.add(direction === 'next' ? 'forwards' : 'backwards');
  return transition.finished;
};

await navigate('prev', () => {
  document.body.dataset.page = 'uebersicht';
});

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

Dokumentübergreifend: Typ im pagereveal-Event setzen

// Voraussetzung im CSS beider Seiten: @view-transition { navigation: auto; }
window.addEventListener('pagereveal', (event) => {
  if (!event.viewTransition) return;

  const from = navigation.activation?.from?.url ?? '';
  const to = navigation.activation?.entry?.url ?? '';
  const isBack = new URL(to).pathname.length < new URL(from || to).pathname.length;

  event.viewTransition.types.add(isBack ? 'backwards' : 'forwards');
  console.log('Aktive Typen:', [...event.viewTransition.types]);
});

Aktive Typen: ["forwards"]

// Wichtig · Fallstricke

Nicht neu zuweisen: transition.types = new Set() hat keine Wirkung, im strikten Modus wird ein TypeError ausgelöst. Ändern Sie das Set stattdessen mit add(), delete() und clear().
Browser-Unterstützung: Transitionstypen gibt es in Chromium ab Version 125 und in Safari ab 18.2. Firefox unterstützt View Transitions erst in neueren Versionen. Prüfen Sie das mit 'types' in ViewTransition.prototype bzw. mit CSS.supports('selector(:active-view-transition-type(x))').
Ältere Chromium-Versionen akzeptieren nur einen Callback an startViewTransition(), kein Objekt mit types. Wenn Ihr Code auch dort laufen soll, fügen Sie die Typen deshalb besser über transition.types.add() hinzu.
Typen sollten gültige CSS-Bezeichner sein. Werte, die mit -ua- beginnen, sowie none sind reserviert und werden nicht als Typ berücksichtigt.
Typen gelten nur während der aktiven Transition. Danach passt :active-view-transition-type() auf nichts mehr.

Siehe auch

CSSViewTransitionRule.types ViewTransition.ready ViewTransition.finished ViewTransition.transitionRoot ViewTransition.updateCallbackDone