CSSViewTransitionRule.types — Eigenschaft · JavaScript-Referenz

Signatur

get CSSViewTransitionRule.types

Beschreibung

Die Eigenschaft types der Schnittstelle CSSViewTransitionRule gibt die im CSS festgelegten View-Transition-Typen einer @view-transition-Regel als Array von Zeichenketten zurück. Steht im Stylesheet etwa @view-transition { navigation: auto; types: slide forwards; }, dann liefert rule.types den Wert ["slide", "forwards"].

Typen legen fest, welche Übergangsanimationen bei einer dokumentübergreifenden View Transition (also beim Seitenwechsel innerhalb desselben Ursprungs) aktiv sind. Im CSS spricht man sie über den Pseudoklassen-Selektor :active-view-transition-type(slide) an. Mit CSSViewTransitionRule.types kann ein Skript nachlesen, welche Typen ein Stylesheet festlegt. Das hilft beim Debuggen, in Entwicklungswerkzeugen oder wenn man die Typen später im Ereignis pagereveal bzw. pageswap gezielt anpassen will.

Die Eigenschaft ist schreibgeschützt und das zurückgegebene Array ist eingefroren (FrozenArray<CSSOMString>). Ist in der Regel kein types-Deskriptor angegeben, erhält man ein leeres Array. Wer die Typen einer laufenden Transition ändern will, nimmt dafür ViewTransition.types (ein ViewTransitionTypeSet) und nicht die CSS-Regel.

Rückgabewert

Typ

string[] (FrozenArray<string>)

Beschreibung

Ein eingefrorenes Array mit den Typnamen aus dem types-Deskriptor in der Reihenfolge, in der sie im CSS stehen. Ohne Deskriptor ist das Array leer.

Beispiele

Typen einer @view-transition-Regel auslesen

// CSS im Dokument:
// @view-transition { navigation: auto; types: slide forwards; }

const style = document.createElement('style');
style.textContent = '@view-transition { navigation: auto; types: slide forwards; }';
document.head.append(style);

const rule = [...style.sheet.cssRules]
  .find((r) => r instanceof CSSViewTransitionRule);

console.log(rule.navigation);
console.log(rule.types);

auto ["slide", "forwards"]

Alle Stylesheets rekursiv nach View-Transition-Typen durchsuchen

const collectViewTransitionTypes = (rules, result = []) => {
  for (const rule of rules) {
    if (rule instanceof CSSViewTransitionRule) {
      result.push(...rule.types);
    } else if (rule.cssRules) {
      // Verschachtelte Regeln, z. B. in @media oder @supports
      collectViewTransitionTypes(rule.cssRules, result);
    }
  }
  return result;
};

if ('CSSViewTransitionRule' in window) {
  const types = [];
  for (const sheet of document.styleSheets) {
    try {
      collectViewTransitionTypes(sheet.cssRules, types);
    } catch {
      // Stylesheet von fremdem Ursprung: cssRules ist nicht lesbar
    }
  }
  console.log('Deklarierte Typen:', [...new Set(types)]);
} else {
  console.log('CSSViewTransitionRule wird nicht unterstützt');
}

Deklarierte Typen: ["slide", "forwards"]

CSS-Typen bei der Navigation per pagereveal anpassen

// Die Typen aus dem CSS dienen als Standard,
// bei Zurück-Navigation wird die Richtung umgedreht.
window.addEventListener('pagereveal', (event) => {
  if (!event.viewTransition) return;

  const nav = navigation.activation;
  const isBack = nav?.navigationType === 'traverse' &&
    nav.entry.index < nav.from?.index;

  if (isBack) {
    event.viewTransition.types.delete('forwards');
    event.viewTransition.types.add('backwards');
  }
  console.log([...event.viewTransition.types]);
});

["slide", "backwards"] // bei Zurück-Navigation

// Wichtig · Fallstricke

Browser-Kompatibilität: CSSViewTransitionRule gibt es in Chromium-Browsern ab Version 126 und in Safari ab 18.2. Firefox unterstützt die Schnittstelle bislang nicht. Deshalb vor der Nutzung mit 'CSSViewTransitionRule' in window prüfen.
Schreibgeschützt: Eine Zuweisung an rule.types wird ignoriert (im Strict Mode gibt es einen TypeError). Auch das Array selbst ist eingefroren, push() und Co. schlagen fehl. Für Änderungen zur Laufzeit ViewTransition.types verwenden.
Die Typen aus @view-transition gelten nur für dokumentübergreifende Übergänge. Bei document.startViewTransition() gibt man Typen stattdessen über { update, types: [...] } an.
Die Namen none sowie Namen mit dem Präfix -ua- sind als Typen ungültig und machen den Deskriptor wirkungslos.
Bei Stylesheets von fremden Ursprüngen ohne CORS löst der Zugriff auf cssRules einen SecurityError aus. Das lässt sich mit try…catch abfangen.

Siehe auch

CSSViewTransitionRule.navigation ViewTransition.types ViewTransition.ready ViewTransition.finished CSSFunctionRule.name