NavigationTransition.from — Eigenschaft · JavaScript-Referenz

Signatur

NavigationTransition.from

Beschreibung

Die Eigenschaft from des Interfaces NavigationTransition gibt den NavigationHistoryEntry zurück, der beim Start der aktuellen Navigation aktiv war, also die „Herkunft“ des Übergangs. Das zugehörige NavigationTransition-Objekt erreicht man über navigation.transition. Diese Eigenschaft ist nur gesetzt, solange eine Navigation läuft, danach ist sie null.

Gebraucht wird from vor allem in Single-Page-Anwendungen, die Navigationen mit dem navigate-Event abfangen. Damit lässt sich zum Beispiel entscheiden, welche Übergangsanimation passt (vor oder zurück, von Liste zu Detailseite), Scrollpositionen oder Formularzustände der alten Seite sichern oder Analysedaten mit Quell- und Ziel-URL erfassen.

Der zurückgegebene Eintrag hat unter anderem die Eigenschaften url, key, id, index und die Methode getState(). Weil navigation.currentEntry während der Navigation schon auf den neuen Eintrag wechseln kann, ist transition.from die zuverlässige Quelle für den Ausgangseintrag.

Rückgabewert

Typ

NavigationHistoryEntry

Beschreibung

Der Verlaufseintrag, von dem der Übergang ausgeht. Die Eigenschaft ist schreibgeschützt.

Beispiele

Herkunft einer laufenden Navigation protokollieren

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;

  event.intercept({
    handler: async () => {
      // Während des Handlers existiert navigation.transition
      const { from, navigationType } = navigation.transition;
      console.log(`${navigationType}: ${from.url} → ${event.destination.url}`);
      await renderRoute(new URL(event.destination.url).pathname);
    }
  });
});

async function renderRoute(path) {
  document.querySelector('main').textContent = `Seite: ${path}`;
}

push: https://example.com/produkte → https://example.com/produkte/42

Animationsrichtung anhand des Verlaufsindex wählen

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;

  event.intercept({
    handler: async () => {
      const fromIndex = navigation.transition.from.index;
      const toIndex = event.destination.index; // -1 bei neuen Einträgen
      const direction = toIndex !== -1 && toIndex < fromIndex ? 'zurueck' : 'vor';
      document.documentElement.dataset.richtung = direction;
      console.log('Richtung:', direction);
    }
  });
});

Richtung: zurueck

Scrollposition der Ausgangsseite sichern

const scrollPositionen = new Map();

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;

  event.intercept({
    scroll: 'manual',
    handler: async () => {
      const { from } = navigation.transition;
      // Über den stabilen key des Ausgangseintrags speichern
      scrollPositionen.set(from.key, window.scrollY);

      const ziel = navigation.currentEntry;
      window.scrollTo(0, scrollPositionen.get(ziel.key) ?? 0);
    }
  });
});

// Wichtig · Fallstricke

navigation.transition ist null, wenn gerade keine Navigation läuft. Außerhalb eines Handlers also vorher prüfen, etwa mit navigation.transition?.from.
Im synchronen Teil des navigate-Events gibt es navigation.transition noch nicht. Es entsteht erst durch event.intercept() und steht dann im handler zur Verfügung.
Einträge vergleicht man über key (bleibt beim Ersetzen eines Eintrags erhalten) oder id (eindeutig pro Eintrag). Ein Vergleich über die Objektidentität ist nicht zuverlässig.
Browser-Kompatibilität: Chromium-Browser unterstützen die Navigation API seit Version 102, Firefox seit Version 147 und Safari seit Version 26.2. Für ältere Browser per if ('navigation' in window) prüfen und auf die History-API (popstate, pushState) ausweichen.

Siehe auch

Navigation.transition NavigationTransition.to NavigationTransition.finished NavigationTransition.committed NavigationTransition.navigationType