CSS-Ansichtstransitionen

Referenz

Eigenschaften

• view-transition-class
• view-transition-name
• view-transition-scope

At-Regeln und Deskriptoren

• @view-transition
  • navigation Deskriptor

Selektoren und Pseudo-Elemente

• :active-view-transition
• :active-view-transition-type()
• ::view-transition
• ::view-transition-image-pair()
• ::view-transition-group()
• ::view-transition-new()
• ::view-transition-old()

Schnittstellen

• CSSViewTransitionRule
• ViewTransition
  • ViewTransition.skipTransition() Methode
  • ViewTransition.updateCallbackDone
  • ViewTransition.ready
  • ViewTransition.finished
  • ViewTransition.transitionRoot
• Document.startViewTransition() Methode
• Document.activeViewTransition
• Element.startViewTransition() Methode
• Element.activeViewTransition

Leitfäden

Verwendung der View Transition API

Erklärt, wie man Ansichtstransitionen erstellt und Übergangsanimationen anpasst, einschließlich der Manipulation aktiver Ansichtstransitionen.

Verwendung von Ansichtstransitionstypen

Zeigt, wie man Typen in Kombination mit Ansichtstransitionen im selben Dokument und zwischen Dokumenten verwendet.

Verwendung von elementgebundenen Ansichtstransitionen

Behandelt, wie elementgebundene Ansichtstransitionen funktionieren und wie man sie verwendet.

Verwandte Konzepte

• pagereveal Ereignis

• pageswap Ereignis

• Document.visibilityState

• CSS-Animationen Modul

  • animation
  • @keyframes
  • CSSKeyframesRule
  • CSSStyleRule
  • Web-Animationen API

• CSS-Transformationen Modul

  • transform
  • <transform-function>

Spezifikationen

Siehe auch

• Pseudo-Elemente
• Funktionale Pseudo-Klassen
• Lernen: Pseudo-Klassen und Pseudo-Elemente