`@view-transition` CSS at-rule

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Die @view-transition CSS Regel wird verwendet, um die aktuellen und Ziel-Dokumente für eine View-Transition bei einer Dokumenten-übergreifenden Navigation zu aktivieren.

Für eine Dokumenten-übergreifende View-Transition müssen sich das aktuelle und das Ziel-Dokument der Navigation auf demselben Ursprung befinden.

Syntax

css

@view-transition {
  navigation: auto | none;
  types: none | <custom-ident>#;
}

Deskriptoren

navigation

Ein Schlüsselwort, das die Wirkung dieser Regel auf das Verhalten der Dokumenten-View-Transition angibt. Mögliche Werte sind:

auto: Das Dokument wird einer View-Transition unterzogen, wenn es an einer Navigation teilnimmt, vorausgesetzt, die Navigation ist gleich-origin, ohne herkunftsübergreifende Weiterleitungen, und sein navigationType ist traverse, push oder replace. Im Fall von push oder replace muss die Navigation durch eine Benutzerinteraktion mit dem Seiteninhalt initiiert werden, nicht durch eine Browser-Benutzeroberflächen-Funktion.
none: Das Dokument wird keiner View-Transition unterzogen.

types

Gibt die View-Transition-Typen an, die auf die aktive View-Transition für die aktuellen und Ziel-Dokumente gesetzt werden sollen. Mögliche Werte sind:

<custom-ident>+: Ein oder mehrere leerzeichengetrennte <custom-ident> Werte, die die zu setzenden Typen darstellen.
none: Keine Typen werden festgelegt.

Formale Syntax

@view-transition = 
  @view-transition { <declaration-list> }

Die folgenden Code-Beispiele zeigen Schlüsselkonzepte, die in einem Seiten-Übergangs-Demo verwendet werden. Das Demo verwendet Dokumenten-übergreifende View-Transitions; eine halbe Sekunde Übergang, der beim Navigieren zwischen zwei Seiten einer Website auftritt. Für das vollständige Demo siehe das View-Transitions-Multi-Page-App-Demo.

Die @view-transition-Regel wird im CSS sowohl für die aktuellen als auch die Ziel-Dokumente einer Navigation angegeben, um sie beide für die View-Transition zu aktivieren:

css

@view-transition {
  navigation: auto;
}

Zusätzlich zur @view-transition-Regel verwenden wir die @keyframes-Regel, um zwei Keyframe-Animationen zu definieren und die animation-Kurzschrift-Eigenschaft, um diese Keyframe-Animationen auf die Elemente der ausgehenden (::view-transition-old()) und eingehenden (::view-transition-new()) Seiten anzuwenden, die wir animieren möchten.

css

/* Create a custom animation */
@keyframes move-out {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes move-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

/* Apply the custom animation to the old and new page states */
::view-transition-old(root) {
  animation: 0.4s ease-in both move-out;
}

::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}

Sehen Sie dieses Transitions-Multi-Page-App Demo live.

Verwenden von View-Transition-Typen

Unser MPA-Transitions-Typen-Beispiel (Quellcode) demonstriert, wie types über @view-transition verwendet wird:

css

@view-transition {
  navigation: auto;
  types: slide;
}

Siehe Verwendung von Typen mit Dokumenten-übergreifenden View-Transitions über @view-transition für eine detaillierte Erklärung des referenzierten Beispiels.

Spezifikationen

Spezifikation
CSS View Transitions Module Level 2 # view-transition-rule

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

@view-transition CSS at-rule

Help improve MDN

`@view-transition` CSS at-rule