DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Das CSS-Pseudoelement ::view-transition ist die oberste Ebene – oder der „Root“ – und enthält alle animierten Übergänge, die als CSS-View-Transitions auf der Seite definiert sind.
::view-transition {
position: fixed;
inset: 0;
}Syntax
::view-transition {
/* Styles */
}Es ist erwähnenswert, dass ::view-transition *alle Seitenübergänge auf der Seite* umfasst (dazu kommen wir gleich), daher werden Sie es wahrscheinlich häufiger ungekettet auf einen Selektor wie das obige Beispiel angewendet sehen, anstatt zum Beispiel so:
/* 👎 */
blockquote::view-transition {
/* Styles */
}So wie es ist, ist ::view-transition auf das <html>-Element beschränkt
html::view-transition {
/* Styles */
}Standardstile
Wie viele semantische HTML-Elemente und Pseudoelemente wendet der Browser eine Reihe von Standardstilen auf ::view-transition an.
::view-transition {
position: fixed;
inset: 0;
}Wenn wir also ::view-transition selbst positionieren möchten, sind dies die Stile, die wir in unserer eigenen Stylesheet überschreiben müssen.
Es ist ein „baumfolgsames“ Pseudoelement
Mit anderen Worten, es ist effektiv ein Wrapper, der als übergeordnetes Pseudoelement für andere darunter dient. Die Spezifikation nennt dies ein „baumfolgsames Pseudoelement“, was bedeutet, dass es andere Pseudos enthält, die verwendet werden können, um Seitenübergänge direkt in CSS zu gestalten.
In diesem Fall enthält ::view-transition *alle Seitenübergänge* auf der Seite, organisiert in Gruppen.
::view-transition
├─ ::view-transition-group(name)
│ └─ ::view-transition-image-pair(name)
│ ├─ ::view-transition-old(name)
│ └─ ::view-transition-new(name)
├─ ::view-transition-group(name)
│ └─ ::view-transition-image-pair(name)
│ ├─ ::view-transition-old(name)
│ └─ ::view-transition-new(name)
│ /* and so one... */
Auf diese Weise können wir Stile definieren, die für alle Seitenübergänge zusammen mit ::view-transition und einzeln mit ::view-transition-group gelten.
Wie es in den Seitenübergangsprozess passt
Es ist eine gute Idee, sich mit den Schritten vertraut zu machen, die ein Seitenübergang durchläuft, um Kontext dafür zu erhalten, wo dieser ::view-transition-Baum in das Gesamtbild passt.
- Ein Seitenübergang wird mit
document.startViewTransition()in JavaScript aktiviert. - Jeder Übergang, den wir an
startViewTransitionübergeben, wird ausgelöst, um den Übergang zwischen Ansichten zu beginnen. - Der Browser nimmt ein Bild, einen Schnappschuss, des neuen Ansichtszustands auf, zu dem übergeblendet werden soll.
- Der
::view-transition-Baum wird erstellt und definiert die im Übergang verwendeten Stile. - Die alte Ansicht blendet aus, während die neue Ansicht einblendet.
- Der Übergang ist abgeschlossen, sobald das Versprechen
ViewTransition.finishedin JavaScript gemacht wird.
Es ist genau dort in Schritt 4, von dem wir sprechen.
Es führt eine neue Stapelschicht ein!
Sie wissen, wie wir die CSS-Eigenschaft z-index verwenden können, um Elemente übereinander zu stapeln, wie in einem dreidimensionalen Raum?
Wir nennen das einen „Stacking Context“ und er entsteht, wenn wir position auf einem Element deklarieren. In diesem Fall befinden sich beide .child-Elemente in einem Stacking Context, in dem wir z-index verwenden, um zu bestimmen, welches Element über dem anderen im Stapel liegt. CSS verwendet diese Informationen, um die Reihenfolge zu bestimmen, in der Stile angewendet werden.
- Elemente mit einer negativen Stapelhöhe, typischerweise Elemente mit
z-index: -1 - Elemente mit einem
position-Wert vonstatic. - Elemente mit einer Stapelhöhe von
0, typischerweise positionierte Elemente mit einemz-index-Wert vonauto. - Elemente mit positiven Stapelhöhen, z. B. ein positioniertes Element mit einem
z-index-Wert von1oder höher.
Diese dritte Ebene wird als „Top Layer“ bezeichnet, da sie genau zwischen den positiven und negativen Ebenen liegt. Hier befinden sich <html> und <body>.
Nun, es stellt sich heraus, dass ::view-transition eine eigene neue Stapelschicht einführt, die *nach* allem anderen angewendet wird, d. h. sie kommt nach der Ebene mit der höchsten Nummer.
- Elemente mit einer negativen Stapelhöhe, typischerweise Elemente mit
z-index: -1 - Elemente mit einem
position-Wert vonstatic. - Elemente mit einer Stapelhöhe von
0, typischerweise positionierte Elemente mit einemz-index-Wert vonauto. - Elemente mit positiven Stapelhöhen, z. B. ein positioniertes Element mit einem
z-index-Wert von1oder höher. - Seitenübergänge
Hier ist genau, wie die Spezifikation es beschreibt:
Das
CSS View Transitions Module Level 1, 4.2. View Transition Painting Order::view-transition-Pseudoelement erzeugt einen neuen Stacking Context, den sogenannten View Transition Layer, der nach allen anderen Inhalten des Dokuments (einschließlich aller Inhalte, die im Top Layer gerendert werden) und nach allen Filtern und Effekten, die auf solche Inhalte angewendet werden, gezeichnet wird. (Er unterliegt keinen solchen Filtern oder Effekten, es sei denn, sie beeinflussen die gerenderten Inhalte der::view-transition-old()und::view-transition-new()-Pseudoelemente.)
Was ist daran so besonders, fragen Sie? Das bedeutet, dass die Stile eines Seitenübergangs nach allem anderen gezeichnet werden, sodass sie niemals unter anderen Ebenen vergraben sind. Auf diese Weise müssen wir niemals zwischen Seitenübergangsstilen und den Stilen der Elemente auf einer Seite mit z-index jonglieren, um sicherzustellen, dass sie sichtbar sind. Dies hat jedoch nur dann Auswirkungen, wenn (1) Seitenübergänge auf der Seite vorhanden sind und (2) wenn der Seitenübergang ausgeführt wird. Sobald der Übergang beendet ist, verschwindet sein Stacking Context.
Spezifikation
Das CSS-Pseudoelement ::view-transition ist in der Spezifikation View Transitions Module Level 1 definiert. Es ist als Candidate Recommendation Snapshot gekennzeichnet, was bedeutet, dass es breit überprüft wurde und dazu bestimmt ist, eine offizielle W3C-Empfehlung zu werden, aber noch im Praxistest ist.
Die Spezifikation besagt weiter
Dieses Dokument soll eine W3C Recommendation werden; es wird mindestens bis zum 5. Dezember 2023 als Candidate Recommendation bleiben, um zusätzliches Feedback zu sammeln.
Dieses Datum ist zum Zeitpunkt der Erstellung dieses Dokuments abgelaufen. Achten Sie also auf den Status des Dokuments, während es auf dem Weg ist, eine empfohlene Funktion zu werden.
Browser-Unterstützung
Wenn Sie ältere Browser unterstützen müssen, die ::view-transition nicht unterstützen, versuchen Sie, @supports zu verwenden, um zu prüfen, ob der Browser die Eigenschaft view-transition-name erkennt.
/* Apply these styles only if View Transitions are *NOT* supported */
@supports not (view-transition-name: none) {
/* Fallback Styles */
}