@view-transition

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die @view-transition CSS at-rule wird verwendet, um das aktuelle und das Ziel-Dokument für einen View-Übergang bei einer Navigationsaktion zwischen Dokumenten zu aktivieren.

Damit ein View-Übergang zwischen verschiedenen Dokumenten funktioniert, müssen das aktuelle und das Ziel-Dokument bei der Navigation denselben Ursprung haben.

Syntax

css
@view-transition {
  navigation: auto;
}

Deskriptoren

Gibt an, welchen Effekt diese at-rule auf das Verhalten des View-Übergangs des Dokuments haben wird. Mögliche Werte sind:

  • auto: Das Dokument wird bei der Teilnahme an einer Navigation einem View-Übergang unterzogen, vorausgesetzt die Navigation hat denselben Ursprung, erfolgt ohne originübergreifende Weiterleitungen und der navigationType ist traverse, push oder replace. Bei push oder replace muss die Navigation durch eine Benutzerinteraktion mit dem Seiteninhalt initiiert werden und nicht durch eine Browser-UI-Funktion.

  • none: Das Dokument wird keinem View-Übergang unterzogen.

Formale Syntax

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

Beispiele

Übergang der Seitenansicht

Die folgenden Code-Beispiele zeigen die wichtigsten Konzepte, die in einem Seitenübergang-Demo verwendet werden. Das Demo verwendet dokumentübergreifende View-Übergänge; ein halbe Sekunde dauernder Übergang, der beim Navigieren zwischen zwei Seiten einer Website auftritt. Für das vollständige Demo siehe das View-Übergänge-Mehrseiten-App-Demo.

Die @view-transition at-rule wird im CSS sowohl für das aktuelle als auch das Ziel-Dokument einer Navigation angegeben, um beide in den View-Übergang einzubeziehen:

css
@view-transition {
  navigation: auto;
}

Zusätzlich zur @view-transition at-rule verwenden wir die @keyframes at-rule, um zwei Keyframe-Animationen zu definieren und die animation Kurzformeigenschaft, um diese Keyframe-Animationen auf die Elemente auf den 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 sich dieses Übergangs-Mehrseiten-App Demo live an.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch