@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 einen View-Transition bei einer Navigation zwischen Dokumenten einzuschließen.

Damit eine View-Transition zwischen Dokumenten funktioniert, müssen sich die aktuellen und Ziel-Dokumente der Navigation auch im selben Origin 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 beteiligt ist, vorausgesetzt, die Navigation hat denselben Origin, ohne Cross-Origin-Umleitungen, und ihr navigationType ist traverse, push oder replace. Im Falle von push oder replace muss die Navigation durch eine Benutzerinteraktion mit dem Seiteninhalt initiiert werden, nicht durch eine Browser-Oberflächenfunktion.

  • 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 einer Seitentransition-Demo verwendet werden. Die Demo verwendet View-Transitions zwischen Dokumenten; ein halbesekündiger Übergang, der beim Navigieren zwischen zwei Seiten einer Website auftritt. Die vollständige Demo finden Sie im View transitions multi-page app demo.

Die @view-transition At-Regel wird sowohl im CSS für Ihre aktuellen als auch Ziel-Dokumente einer Navigation angegeben, um sie beide in die View-Transition einzuschließen:

css
@view-transition {
  navigation: auto;
}

Neben der @view-transition At-Regel verwenden wir die @keyframes At-Regel, um zwei Keyframe-Animationen zu definieren, und verwenden die animation Kurzschreibweise, um diese Keyframe-Animationen auf die Elemente in 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 diese transitions multi-page app Demo live an.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch