@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-Regel wird verwendet, um die aktuellen und Ziel-Dokumente für eine View-Transition im Falle einer dokumentübergreifenden Navigation zu aktivieren.

Damit eine dokumentübergreifende View-Transition funktioniert, müssen sich die aktuellen und Ziel-Dokumente der Navigation auch im gleichen Ursprung befinden.

Syntax

css
@view-transition {
  navigation: auto;
}

Deskriptoren

Gibt an, welche Wirkung diese At-Regel auf das View-Transition-Verhalten des Dokuments haben wird. Mögliche Werte sind:

  • auto: Das Dokument wird eine View-Transition durchlaufen, wenn es an einer Navigation teilnimmt, vorausgesetzt, die Navigation erfolgt vom gleichen Ursprung, ohne ursprungsübergreifende Weiterleitungen, und der navigationType ist traverse, push oder replace. Im Falle von push oder replace muss die Navigation durch eine Benutzerinteraktion mit dem Seiteninhalt und nicht durch eine Browser-UI-Funktion eingeleitet werden.

  • none: Das Dokument wird keine View-Transition durchlaufen.

Formale Syntax

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

Beispiele

Übergang der Seitenansicht

Die folgenden Code-Snippets zeigen Schlüsselkonzepte, die in einem Seitenübergang-Demo verwendet werden. Das Demo verwendet dokumentübergreifende View-Transitions; einen halben Sekunden dauernden Übergang, der beim Navigieren zwischen zwei Seiten einer Website auftritt. Für das vollständige Demo, sehen Sie das View Transitions Multi-Page App Demo.

Die @view-transition At-Regel wird im CSS sowohl für das aktuelle als auch für das Ziel-Dokument einer Navigation spezifiziert, um beide für die View-Transition zu aktivieren:

css
@view-transition {
  navigation: auto;
}

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

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 Übergänge Multi-Page App Demo live an.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch