Wenn ein Ansichtsübergang in einem einzelnen Dokument ausgeführt wird, wird er als Ansichtsübergang im selben Dokument bezeichnet. Dies ist in der Regel bei Single-Page-Anwendungen (SPAs) der Fall, in denen JavaScript zur Aktualisierung des DOMs verwendet wird. Übergänge zwischen der Ansicht für das gleiche Dokument werden in Chrome ab Chrome 111 unterstützt.
Rufen Sie document.startViewTransition
auf, um einen Wechsel der Ansicht für dasselbe Dokument auszulösen:
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
Wenn die Funktion aufgerufen wird, erfasst der Browser automatisch Snapshots aller Elemente, für die eine view-transition-name
-CSS-Property deklariert wurde.
Anschließend wird der übergebene Callback ausgeführt, der das DOM aktualisiert, und es werden Snapshots des neuen Status erstellt.
Diese Momentaufnahmen werden dann in einer Baumstruktur aus Pseudoelementen angeordnet und mithilfe von CSS-Animationen animiert. Zwei Momentaufnahmen aus dem alten und neuen Zustand gehen nahtlos von ihrer alten Position und Größe an ihren neuen Ort über, während der Inhalt überblendet wird. Sie können die Animationen auch mit CSS anpassen.
Standardübergang: Weichzeichner
Der Standardübergang der Ansicht ist ein Überblenden und dient als gute Einführung in die API:
function spaNavigate(data) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow(data);
return;
}
// With a transition:
document.startViewTransition(() => updateTheDOMSomehow(data));
}
Dabei ändert updateTheDOMSomehow
das DOM in den neuen Status. Das ist ganz Ihnen überlassen. Sie können beispielsweise Elemente hinzufügen oder entfernen, Klassennamen ändern oder Stile ändern.
So einfach gehts:
Okay, ein Cross-Fade ist nicht so beeindruckend. Zum Glück können Übergänge angepasst werden. Aber zuerst musst du wissen, wie dieser einfache Cross-Fade funktioniert.
Funktionsweise dieser Übergänge
Aktualisieren wir das vorherige Codebeispiel.
document.startViewTransition(() => updateTheDOMSomehow(data));
Wenn .startViewTransition()
aufgerufen wird, erfasst die API den aktuellen Status der Seite. Dazu gehört auch das Erstellen eines Snapshots.
Danach wird der an .startViewTransition()
übergebene Callback aufgerufen. Hier wird das DOM geändert. Anschließend erfasst die API den neuen Status der Seite.
Nachdem der neue Status erfasst wurde, erstellt die API einen Pseudoelementbaum wie folgt:
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)
::view-transition
wird in einem Overlay über allen anderen Elementen auf der Seite angezeigt. Dies ist nützlich, wenn Sie eine Hintergrundfarbe für den Übergang festlegen möchten.
::view-transition-old(root)
ist ein Screenshot der alten Ansicht und ::view-transition-new(root)
eine Live-Darstellung der neuen Ansicht. Beide werden als CSS-Ersatzinhalt gerendert (z. B. ein <img>
).
Die alte Ansicht wird von opacity: 1
nach opacity: 0
animiert, während die neue Ansicht von opacity: 0
nach opacity: 1
animiert wird. Dadurch entsteht ein Überblendungseffekt.
Die gesamte Animation wird mit CSS-Animationen ausgeführt und kann daher mit CSS angepasst werden.
Übergang anpassen
Für alle Pseudoelemente des Ansichtsübergangs kann mit CSS ein Targeting vorgenommen werden. Da die Animationen mit CSS definiert sind, können Sie sie mithilfe vorhandener CSS-Animationseigenschaften ändern. Beispiel:
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 5s;
}
Mit dieser einen Änderung wird das Ausblenden jetzt sehr langsam:
Okay, das ist immer noch nicht beeindruckend. Stattdessen wird im folgenden Code der Übergang mit gemeinsamer Achse von Material Design implementiert:
@keyframes fade-in {
from { opacity: 0; }
}
@keyframes fade-out {
to { opacity: 0; }
}
@keyframes slide-from-right {
from { transform: translateX(30px); }
}
@keyframes slide-to-left {
to { transform: translateX(-30px); }
}
::view-transition-old(root) {
animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
Das Ergebnis:
Mehrere Elemente überblenden
In der vorherigen Demo ist die gesamte Seite am Übergang mit gemeinsamer Achse beteiligt. Das funktioniert für den Großteil der Seite, aber für die Überschrift scheint es nicht ganz richtig zu sein. Sie gleitet heraus, um wieder hineinzuschieben.
Um dies zu vermeiden, können Sie die Kopfzeile aus dem Rest der Seite extrahieren, sodass sie separat animiert werden kann. Dazu wird dem Element eine view-transition-name
zugewiesen.
.main-header {
view-transition-name: main-header;
}
Der Wert von view-transition-name
kann beliebig sein, mit Ausnahme von none
, was bedeutet, dass es keinen Übergangsnamen gibt. Damit wird das Element eindeutig über den gesamten Übergang hinweg identifiziert.
Das Ergebnis:
Jetzt bleibt die Überschrift an Ort und Stelle und wird überblendet.
Diese CSS-Deklaration hat dazu geführt, dass sich die Pseudoelementstruktur geändert hat:
::view-transition
├─ ::view-transition-group(root)
│ └─ ::view-transition-image-pair(root)
│ ├─ ::view-transition-old(root)
│ └─ ::view-transition-new(root)
└─ ::view-transition-group(main-header)
└─ ::view-transition-image-pair(main-header)
├─ ::view-transition-old(main-header)
└─ ::view-transition-new(main-header)
Es gibt jetzt zwei Übergangsgruppen. Eine für die Überschrift und eine für den Rest. Sie können mit CSS ein unabhängiges Targeting sowie verschiedene Übergänge vornehmen. In diesem Fall wurde für main-header
jedoch der Standardübergang beibehalten, der eine Überblendung ist.
Okay, der Standardübergang ist nicht nur ein Überblenden, der ::view-transition-group
führt auch Übergänge aus:
- Positionieren und transformieren (mit einem
transform
) - Breite
- Höhe
Das spielte bisher keine Rolle, da die Kopfzeile auf beiden Seiten des DOM dieselbe Größe und Position hat. Sie können aber auch den Text in der Kopfzeile extrahieren:
.main-header-text {
view-transition-name: main-header-text;
width: fit-content;
}
fit-content
wird verwendet, damit das Element die Größe des Textes entspricht, anstatt sich auf die verbleibende Breite zu strecken. Andernfalls wird mit dem Zurückpfeil die Größe des Textelements in der Kopfzeile verkleinert und nicht auf beiden Seiten gleich.
Wir haben also drei Teile:
::view-transition
├─ ::view-transition-group(root)
│ └─ …
├─ ::view-transition-group(main-header)
│ └─ …
└─ ::view-transition-group(main-header-text)
└─ …
Aber auch hier: Wir verwenden einfach die Standardeinstellungen:
Jetzt bewegt sich der Überschriftentext etwas zufriedenstellend hinüber, um Platz für die Schaltfläche „Zurück“ zu schaffen.
Mehrere Pseudoelemente mit view-transition-class
auf dieselbe Weise animieren
Unterstützte Browser
Angenommen, Sie haben einen Übergang mit mehreren Karten, aber auch einem Titel auf der Seite. Wenn Sie alle Karten außer dem Titel animieren möchten, müssen Sie einen Selector schreiben, der auf jede einzelne Karte ausgerichtet ist.
h1 {
view-transition-name: title;
}
::view-transition-group(title) {
animation-timing-function: ease-in-out;
}
#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
…
#card20 { view-transition-name: card20; }
::view-transition-group(card1),
::view-transition-group(card2),
::view-transition-group(card3),
::view-transition-group(card4),
…
::view-transition-group(card20) {
animation-timing-function: var(--bounce);
}
Du hast 20 Elemente? Das sind 20 Selektoren, die Sie schreiben müssen. Neues Element hinzufügen? Dann müssen Sie auch den Selektor erweitern, der die Animationsstile anwendet. Nicht wirklich skalierbar.
Die view-transition-class
kann in den Pseudoelementen für die Ansichtsübergänge verwendet werden, um dieselbe Stilregel anzuwenden.
#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
#card5 { view-transition-name: card5; }
…
#card20 { view-transition-name: card20; }
#cards-wrapper > div {
view-transition-class: card;
}
html::view-transition-group(.card) {
animation-timing-function: var(--bounce);
}
Im Beispiel für Karten wird das vorherige CSS-Snippet verwendet. Auf alle Karten – auch neu hinzugefügte – wird mit einem Selektor dasselbe Timing angewendet: html::view-transition-group(.card)
.
Übergänge zur Fehlerbehebung
Da Ansichtsübergänge auf CSS-Animationen basieren, eignet sich der Bereich Animationen in den Chrome-Entwicklertools hervorragend zum Debuggen von Übergängen.
Im Bereich Animationen können Sie die nächste Animation pausieren und dann mit dem Scrubbing-Menü vor- und zurückspringen. Die Übergangs-Pseudoelemente finden Sie im Steuerfeld Elemente.
Die Elemente, zwischen denen die Übergänge erfolgen, müssen nicht dasselbe DOM-Element sein.
Bisher haben wir view-transition-name
verwendet, um separate Übergangselemente für den Header und den Text im Header zu erstellen. Vor und nach der DOM-Änderung handelt es sich um dasselbe Element. Sie können aber Übergänge erstellen, bei denen das nicht der Fall ist.
Dem Hauptvideo-Embed kann beispielsweise view-transition-name
zugewiesen werden:
.full-embed {
view-transition-name: full-embed;
}
Wenn dann auf das Thumbnail geklickt wird, kann es dasselbe view-transition-name
erhalten, nur für die Dauer des Übergangs:
thumbnail.onclick = async () => {
thumbnail.style.viewTransitionName = 'full-embed';
document.startViewTransition(() => {
thumbnail.style.viewTransitionName = '';
updateTheDOMSomehow();
});
};
Und das Ergebnis:
Das Thumbnail wird jetzt in das Hauptbild überführt. Obwohl es sich um konzeptionell (und buchstäblich) unterschiedliche Elemente handelt, behandelt die Transition API sie als dasselbe, weil sie dieselbe view-transition-name
haben.
Der eigentliche Code für diesen Übergang ist etwas komplizierter als im vorherigen Beispiel, da er auch den Übergang zurück zur Thumbnail-Seite übernimmt. Die vollständige Implementierung finden Sie in der Quelle.
Benutzerdefinierte Übergänge für den Einstieg und Ausstieg
Sehen Sie sich dieses Beispiel an:
Die Seitenleiste ist Teil des Übergangs:
.sidebar {
view-transition-name: sidebar;
}
Im Gegensatz zum Header im vorherigen Beispiel wird die Seitenleiste jedoch nicht auf allen Seiten angezeigt. Wenn beide Zustände die Seitenleiste haben, sehen die Übergangs-Pseudoelemente so aus:
::view-transition
├─ …other transition groups…
└─ ::view-transition-group(sidebar)
└─ ::view-transition-image-pair(sidebar)
├─ ::view-transition-old(sidebar)
└─ ::view-transition-new(sidebar)
Wenn sich die Seitenleiste jedoch nur auf der neuen Seite befindet, ist das Pseudo-Element ::view-transition-old(sidebar)
nicht vorhanden. Da es kein „altes“ Bild für die Seitenleiste gibt, enthält das Bildpaar nur eine ::view-transition-new(sidebar)
. Befindet sich die Seitenleiste nur auf der alten Seite, hat das Bildpaar nur ein ::view-transition-old(sidebar)
.
In der vorherigen Demo werden die Übergänge der Seitenleiste unterschiedlich angepasst, je nachdem, ob sie in beiden Zuständen angezeigt wird, sie schließt oder sie verlässt. Er erscheint von rechts und wird eingeblendet, verschwindet nach rechts und wird ausgeblendet. Wenn er in beiden Status vorhanden ist, bleibt er an seinem Platz.
Wenn Sie bestimmte Eingangs- und Exit-Übergänge erstellen möchten, können Sie die Pseudoklasse :only-child
verwenden, um ein Targeting auf die alten oder neuen Pseudoelemente vorzunehmen, wenn es das einzige untergeordnete Element im Bildpaar ist:
/* Entry transition */
::view-transition-new(sidebar):only-child {
animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
/* Exit transition */
::view-transition-old(sidebar):only-child {
animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
In diesem Fall gibt es keinen speziellen Übergang, wenn die Seitenleiste in beiden Status vorhanden ist, da der Standard perfekt ist.
Asynchrone DOM-Aktualisierungen und Warten auf Inhalte
Der an .startViewTransition()
übergebene Callback kann ein Promise zurückgeben, das asynchrone DOM-Aktualisierungen ermöglicht und darauf wartet, dass wichtige Inhalte bereit sind.
document.startViewTransition(async () => {
await something;
await updateTheDOMSomehow();
await somethingElse;
});
Die Umstellung wird erst gestartet, wenn die Zusicherung erfüllt ist. Während dieser Zeit ist die Seite eingefroren, sodass die Verzögerungen auf ein Minimum begrenzt werden sollten. Insbesondere sollten Netzwerkabrufe vor dem Aufruf von .startViewTransition()
erfolgen, während die Seite noch vollständig interaktiv ist und nicht als Teil des .startViewTransition()
-Callbacks.
Wenn Sie warten möchten, bis Bilder oder Schriftarten bereitstehen, verwenden Sie ein aggressives Zeitlimit:
const wait = ms => new Promise(r => setTimeout(r, ms));
document.startViewTransition(async () => {
updateTheDOMSomehow();
// Pause for up to 100ms for fonts to be ready:
await Promise.race([document.fonts.ready, wait(100)]);
});
In manchen Fällen ist es jedoch besser, die Verzögerung ganz zu vermeiden und den bereits vorhandenen Content zu verwenden.
Vorhandene Inhalte optimal nutzen
Wenn die Miniaturansicht zu einem größeren Bild übergeht:
Der Standardübergang ist Überblendung, d. h., die Miniaturansicht könnte überblenden mit einem noch nicht geladenen vollständigen Bild.
Sie können dies vermeiden, indem Sie warten, bis das vollständige Bild geladen ist, bevor Sie mit dem Übergang beginnen. Idealerweise sollte dies vor dem Aufruf von .startViewTransition()
erfolgen, damit die Seite interaktiv bleibt und ein rotierendes Ladesymbol angezeigt wird, um den Nutzer darauf hinzuweisen, dass die Seite geladen wird. In diesem Fall gibt es jedoch eine bessere Lösung:
::view-transition-old(full-embed),
::view-transition-new(full-embed) {
/* Prevent the default animation,
so both views remain opacity:1 throughout the transition */
animation: none;
/* Use normal blending,
so the new view sits on top and obscures the old view */
mix-blend-mode: normal;
}
Jetzt verschwindet das Thumbnail nicht, sondern befindet sich nur unter dem vollständigen Bild. Wenn also die neue Ansicht nicht geladen wurde, ist die Miniaturansicht während des Übergangs zu sehen. So kann der Übergang sofort beginnen und das vollständige Bild kann in seinem eigenen Tempo geladen werden.
Das würde nicht funktionieren, wenn die neue Ansicht Transparenz hätte. In diesem Fall wissen wir jedoch, dass das nicht der Fall ist, sodass wir diese Optimierung vornehmen können.
Mit Änderungen des Seitenverhältnisses umgehen
Bisher hatten alle Übergänge Elemente mit demselben Seitenverhältnis. Das ist aber nicht immer der Fall. Was ist, wenn das Thumbnail 1:1 und das Hauptbild 16:9 hat?
Beim Standardübergang wird die Gruppe von der Größe vor zur Nach-Größe animiert. Die alte und die neue Ansicht haben eine Breite von 100 % der Gruppe und eine automatische Höhe. Das bedeutet, dass sie unabhängig von der Größe der Gruppe ihr Seitenverhältnis beibehalten.
Das ist eine gute Standardeinstellung, aber in diesem Fall nicht das, was wir wollen. Das bedeutet:
::view-transition-old(full-embed),
::view-transition-new(full-embed) {
/* Prevent the default animation,
so both views remain opacity:1 throughout the transition */
animation: none;
/* Use normal blending,
so the new view sits on top and obscures the old view */
mix-blend-mode: normal;
/* Make the height the same as the group,
meaning the view size might not match its aspect-ratio. */
height: 100%;
/* Clip any overflow of the view */
overflow: clip;
}
/* The old view is the thumbnail */
::view-transition-old(full-embed) {
/* Maintain the aspect ratio of the view,
by shrinking it to fit within the bounds of the element */
object-fit: contain;
}
/* The new view is the full image */
::view-transition-new(full-embed) {
/* Maintain the aspect ratio of the view,
by growing it to cover the bounds of the element */
object-fit: cover;
}
Das bedeutet, dass das Thumbnail bei der Ausweitung der Breite in der Mitte des Elements bleibt, das vollständige Bild wird jedoch beim Übergang von 1:1 zu 16:9 wieder „entfernt“.
Weitere Informationen finden Sie unter Übergangseffekte: Umgang mit Änderungen des Seitenverhältnisses.
Verwenden Sie Medienabfragen, um Übergänge für verschiedene Gerätestatus zu ändern
Sie können unterschiedliche Übergänge für Mobilgeräte und Computer verwenden. In diesem Beispiel wird auf Mobilgeräten eine vollständige seitliche Folie verwendet, auf Computern hingegen eine dezentere Folie:
Das ist mithilfe regulärer Medienabfragen möglich:
/* Transitions for mobile */
::view-transition-old(root) {
animation: 300ms ease-out both full-slide-to-left;
}
::view-transition-new(root) {
animation: 300ms ease-out both full-slide-from-right;
}
@media (min-width: 500px) {
/* Overrides for larger displays.
This is the shared axis transition from earlier in the article. */
::view-transition-old(root) {
animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
}
Sie können auch ändern, welche Elemente Sie je nach übereinstimmenden Medienabfragen eine view-transition-name
zuweisen.
Auf „verringerte Bewegungen“ reagieren Einstellung
Nutzer können angeben, dass sie Bewegungen in ihrem Betriebssystem reduzieren möchten. Diese Präferenz wird in CSS angezeigt.
Sie können festlegen, dass für diese Nutzer keine Umstellungen erfolgen:
@media (prefers-reduced-motion) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
Eine Präferenz für „verringerte Bewegungen“ bedeutet nicht, dass der Nutzer keine Bewegung haben möchte. Anstelle des vorherigen Snippets können Sie eine dezentere Animation auswählen, die aber dennoch die Beziehung zwischen den Elementen und den Datenfluss ausdrückt.
Mehrere Ansichtsübergangsstile mit Ansichtsübergangstypen verarbeiten
Unterstützte Browser
Manchmal sollte ein Wechsel von einer bestimmten Ansicht zur anderen genau angepasst werden. Wenn Sie beispielsweise in einer Paginierungssequenz zur nächsten oder zur vorherigen Seite wechseln, können Sie die Inhalte je nachdem, ob Sie zu einer höheren oder niedrigeren Seite der Sequenz wechseln, in eine andere Richtung verschieben.
Dazu können Sie Arten von Ansichtenübergangen verwenden, mit denen Sie einem Active View-Übergang einen oder mehrere Typen zuweisen können. Wenn Sie beispielsweise bei einer Paginierungssequenz zu einer höheren Seite übergehen, verwenden Sie den Typ forwards
und beim Wechsel zu einer niedrigeren Seite den Typ backwards
. Diese Typen sind nur aktiv, wenn ein Übergang erfasst oder ausgeführt wird. Jeder Typ kann über CSS angepasst werden, um verschiedene Animationen zu verwenden.
Wenn Sie Typen in einem Ansichtsübergang innerhalb desselben Dokuments verwenden möchten, übergeben Sie types
an die Methode startViewTransition
. Dazu akzeptiert document.startViewTransition
auch ein Objekt: update
ist die Callback-Funktion, die das DOM aktualisiert, und types
ist ein Array mit den Typen.
const direction = determineBackwardsOrForwards();
const t = document.startViewTransition({
update: updateTheDOMSomehow,
types: ['slide', direction],
});
Verwenden Sie die Auswahl :active-view-transition-type()
, um auf diese Typen zu reagieren. Übergeben Sie den type
, auf den Sie ein Targeting vornehmen möchten, in den Selektor. Auf diese Weise können Sie die Stile mehrerer Ansichtsübergänge voneinander getrennt halten, ohne dass die Deklarationen des einen Übergangs die Deklarationen des anderen beeinflussen.
Da Typen nur beim Aufzeichnen oder Ausführen des Übergangs angewendet werden, können Sie mit dem Selector ein view-transition-name
für ein Element nur für den Ansichtsübergang mit diesem Typ festlegen oder aufheben.
/* Determine what gets captured when the type is forwards or backwards */
html:active-view-transition-type(forwards, backwards) {
:root {
view-transition-name: none;
}
article {
view-transition-name: content;
}
.pagination {
view-transition-name: pagination;
}
}
/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
&::view-transition-old(content) {
animation-name: slide-out-to-left;
}
&::view-transition-new(content) {
animation-name: slide-in-from-right;
}
}
/* Animation styles for backwards type only */
html:active-view-transition-type(backwards) {
&::view-transition-old(content) {
animation-name: slide-out-to-right;
}
&::view-transition-new(content) {
animation-name: slide-in-from-left;
}
}
/* Animation styles for reload type only (using the default root snapshot) */
html:active-view-transition-type(reload) {
&::view-transition-old(root) {
animation-name: fade-out, scale-down;
}
&::view-transition-new(root) {
animation-delay: 0.25s;
animation-name: fade-in, scale-up;
}
}
In der folgenden Demo zur Paginierung wird der Seiteninhalt je nach Seitennummer, die Sie aufrufen, vor- oder zurückgeschoben. Die Typen werden durch einen Klick festgelegt und dann an document.startViewTransition
übergeben.
Wenn Sie unabhängig vom Typ auf eine aktive Ansichtsüberleitung ausrichten möchten, können Sie stattdessen die Pseudoklassenauswahl :active-view-transition
verwenden.
html:active-view-transition {
…
}
Mehrere Stilübergangsstile für Ansichten mit einem Klassennamen im Stamm des Ansichtsübergangs verarbeiten
Manchmal sollte ein Übergang von einem bestimmten Ansichtstyp zu einem anderen genau angepasst werden. oder „Zurück“ Navigation sollte sich von "forward" unterscheiden. Navigation.
Vor Übergangstypen wurde in diesen Fällen vorübergehend ein Klassenname auf der Übergangs-Stammebene festgelegt. Beim Aufrufen von document.startViewTransition
ist dieses Übergangselement das <html>
-Element, auf das in JavaScript mit document.documentElement
zugegriffen werden kann:
if (isBackNavigation) {
document.documentElement.classList.add('back-transition');
}
const transition = document.startViewTransition(() =>
updateTheDOMSomehow(data)
);
try {
await transition.finished;
} finally {
document.documentElement.classList.remove('back-transition');
}
In diesem Beispiel wird transition.finished
verwendet, um die Klassen nach Abschluss des Übergangs zu entfernen. Dieses Promise wird aufgelöst, sobald der Übergang den Endzustand erreicht hat. Weitere Eigenschaften dieses Objekts werden in der API-Referenz behandelt.
Sie können diesen Klassennamen jetzt in Ihrem CSS verwenden, um die Übergänge zu ändern:
/* 'Forward' transitions */
::view-transition-old(root) {
animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms
cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
/* Overrides for 'back' transitions */
.back-transition::view-transition-old(root) {
animation-name: fade-out, slide-to-right;
}
.back-transition::view-transition-new(root) {
animation-name: fade-in, slide-from-left;
}
Wie bei Medienabfragen kann auch anhand der Anwesenheit dieser Klassen geändert werden, für welche Elemente eine view-transition-name
festgelegt wird.
Übergänge ausführen, ohne andere Animationen einzufrieren
Hier siehst du eine Demo einer Videoübergangsposition:
Haben Sie etwas Ungewöhnliches bemerkt? Keine Sorge, wenn Sie das nicht getan haben. Hier ist es verlangsamt:
Während des Übergangs scheint das Video einzufrieren, dann wird die wiedergegebene Version des Videos eingeblendet. Das liegt daran, dass ::view-transition-old(video)
ein Screenshot der alten Ansicht ist, während ::view-transition-new(video)
ein Livebild der neuen Ansicht ist.
Sie können das Problem beheben. Fragen Sie sich jedoch zuerst, ob sich eine Fehlerbehebung lohnt. Wenn Sie das „Problem“ nicht gesehen haben, als der Übergang mit normaler Geschwindigkeit abgespielt wurde, würde ich ihn nicht ändern.
Wenn du das Problem wirklich beheben möchtest, zeig den ::view-transition-old(video)
nicht an. wechseln Sie direkt zu ::view-transition-new(video)
. Dazu können Sie die Standardstile und -animationen überschreiben:
::view-transition-old(video) {
/* Don't show the frozen old view */
display: none;
}
::view-transition-new(video) {
/* Don't fade the new view in */
animation: none;
}
Webseite.
Das Video wird jetzt während des Übergangs abgespielt.
Animationen mit JavaScript
Bisher wurden alle Übergänge mit CSS definiert, aber manchmal reicht CSS nicht aus:
Einige Teile dieser Umstellung können mit CSS allein nicht erreicht werden:
- Die Animation beginnt an der Klickposition.
- Die Animation endet damit, dass der Kreis einen Radius bis zur entferntesten Ecke hat. In Zukunft wird dies jedoch hoffentlich mit CSS möglich sein.
Glücklicherweise können Sie Übergänge mit der Web Animation API erstellen.
let lastClick;
addEventListener('click', event => (lastClick = event));
function spaNavigate(data) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow(data);
return;
}
// Get the click position, or fallback to the middle of the screen
const x = lastClick?.clientX ?? innerWidth / 2;
const y = lastClick?.clientY ?? innerHeight / 2;
// Get the distance to the furthest corner
const endRadius = Math.hypot(
Math.max(x, innerWidth - x),
Math.max(y, innerHeight - y)
);
// With a transition:
const transition = document.startViewTransition(() => {
updateTheDOMSomehow(data);
});
// Wait for the pseudo-elements to be created:
transition.ready.then(() => {
// Animate the root's new view
document.documentElement.animate(
{
clipPath: [
`circle(0 at ${x}px ${y}px)`,
`circle(${endRadius}px at ${x}px ${y}px)`,
],
},
{
duration: 500,
easing: 'ease-in',
// Specify which pseudo-element to animate
pseudoElement: '::view-transition-new(root)',
}
);
});
}
In diesem Beispiel wird transition.ready
verwendet, ein Versprechen, das erfüllt wird, sobald die Pseudoelemente für die Übergänge erfolgreich erstellt wurden. Weitere Eigenschaften dieses Objekts finden Sie in der API-Referenz.
Übergänge als Erweiterung
Die View Transition API ist so konzipiert, dass eine DOM-Änderung „verpackt“ und ein Übergang dafür erstellt wird. Der Übergang sollte jedoch als Verbesserung behandelt werden. Ihre App sollte also nicht in den Status „Fehler“ wechseln, wenn die DOM-Änderung erfolgreich ist, der Übergang aber fehlschlägt. Idealerweise sollte der Übergang nicht fehlschlagen. Sollte das doch passieren, sollte die Nutzerfreundlichkeit nicht beeinträchtigt werden.
Achte darauf, Übergangsversprechen nicht so zu verwenden, dass deine App beim Fehlschlagen des Übergangs eine Ausgabe auslöst.
async function switchView(data) { // Fallback for browsers that don't support this API: if (!document.startViewTransition) { await updateTheDOM(data); return; } const transition = document.startViewTransition(async () => { await updateTheDOM(data); }); await transition.ready; document.documentElement.animate( { clipPath: [`inset(50%)`, `inset(0)`], }, { duration: 500, easing: 'ease-in', pseudoElement: '::view-transition-new(root)', } ); }
Das Problem bei diesem Beispiel ist, dass switchView()
abgelehnt wird, wenn der Übergang den Status ready
nicht erreichen kann. Das bedeutet aber nicht, dass die Ansicht nicht gewechselt werden konnte. Das DOM wurde möglicherweise erfolgreich aktualisiert, aber es gab doppelte view-transition-name
s, sodass die Umstellung übersprungen wurde.
Gehen Sie in diesem Fall so vor:
async function switchView(data) { // Fallback for browsers that don't support this API: if (!document.startViewTransition) { await updateTheDOM(data); return; } const transition = document.startViewTransition(async () => { await updateTheDOM(data); }); animateFromMiddle(transition); await transition.updateCallbackDone; } async function animateFromMiddle(transition) { try { await transition.ready; document.documentElement.animate( { clipPath: [`inset(50%)`, `inset(0)`], }, { duration: 500, easing: 'ease-in', pseudoElement: '::view-transition-new(root)', } ); } catch (err) { // You might want to log this error, but it shouldn't break the app } }
In diesem Beispiel wird transition.updateCallbackDone
verwendet, um auf die DOM-Aktualisierung zu warten und sie bei einem Fehler abzulehnen. switchView
lehnt nicht mehr ab, wenn der Übergang fehlschlägt, wird aufgelöst, wenn die DOM-Aktualisierung abgeschlossen ist, und lehnt sie ab, wenn die Umstellung fehlschlägt.
Wenn switchView
erst dann aufgelöst werden soll, wenn die neue Ansicht „stabil“ ist, d. h., wenn alle animierten Übergänge abgeschlossen oder zum Ende übersprungen wurden, ersetzen Sie transition.updateCallbackDone
durch transition.finished
.
Kein Polyfill, aber...
Dies ist keine einfache Funktion für Polyfills. Diese Hilfsfunktion vereinfacht jedoch die Verwendung in Browsern, die keine Ansichtsübergänge unterstützen:
function transitionHelper({
skipTransition = false,
types = [],
update,
}) {
const unsupported = (error) => {
const updateCallbackDone = Promise.resolve(update()).then(() => {});
return {
ready: Promise.reject(Error(error)),
updateCallbackDone,
finished: updateCallbackDone,
skipTransition: () => {},
types,
};
}
if (skipTransition || !document.startViewTransition) {
return unsupported('View Transitions are not supported in this browser');
}
try {
const transition = document.startViewTransition({
update,
types,
});
return transition;
} catch (e) {
return unsupported('View Transitions with types are not supported in this browser');
}
}
Und es kann so verwendet werden:
function spaNavigate(data) {
const types = isBackNavigation ? ['back-transition'] : [];
const transition = transitionHelper({
update() {
updateTheDOMSomehow(data);
},
types,
});
// …
}
In Browsern, die Ansichtsübergänge nicht unterstützen, wird updateDOM
weiterhin aufgerufen, es erfolgt jedoch keine animierte Überleitung.
Sie können auch einige classNames
angeben, die während des Übergangs zu <html>
hinzugefügt werden sollen. So lässt sich der Übergang je nach Navigationstyp leichter ändern.
Sie können auch true
an skipTransition
übergeben, wenn Sie keine Animation wünschen, auch in Browsern, die Ansichtsübergänge unterstützen. Das ist hilfreich, wenn auf Ihrer Website die Option zum Deaktivieren von Übergängen für Nutzer verfügbar ist.
Mit Frameworks arbeiten
Wenn Sie mit einer Bibliothek oder einem Framework arbeiten, das DOM-Änderungen abstrahiert, ist der schwierige Teil zu wissen, wann die DOM-Änderung abgeschlossen ist. Hier ist eine Reihe von Beispielen, für die der Helper oben in verschiedenen Frameworks verwendet wird.
- React: Der Schlüssel ist hier
flushSync
, mit dem eine Reihe von Statusänderungen synchron angewendet wird. Ja, es gibt eine große Warnung zur Verwendung dieser API, aber Dan Abramov versichert mir, dass sie in diesem Fall angemessen ist. Wie bei React und asynchronem Code üblich, müssen Sie bei der Verwendung der verschiedenen vonstartViewTransition
zurückgegebenen Versprechen darauf achten, dass Ihr Code mit dem richtigen Status ausgeführt wird. - Vue.js: Der Schlüssel ist hier
nextTick
, der erfüllt wird, sobald das DOM aktualisiert wurde. - Svelte: sehr ähnlich wie Vue, aber mit der Methode zum Warten auf die nächste Änderung wird
tick
verwendet. - Liegen – hier ist das Promise
this.updateComplete
innerhalb der Komponenten, das erfüllt wird, sobald das DOM aktualisiert wurde. - Angular: Der Schlüssel hier ist
applicationRef.tick
. Damit werden ausstehende DOM-Änderungen geleert. Ab der Angular-Version 17 kannst duwithViewTransitions
verwenden, die im@angular/router
enthalten ist.
API-Referenz
const viewTransition = document.startViewTransition(update)
Erstellen Sie eine neue
ViewTransition
.update
ist eine Funktion, die aufgerufen wird, sobald der aktuelle Status des Dokuments erfasst wurde.Wenn dann das von
updateCallback
zurückgegebene Versprechen erfüllt wird, beginnt der Übergang im nächsten Frame. Wenn das vonupdateCallback
zurückgegebene Promise abgelehnt wird, wird der Übergang abgebrochen.const viewTransition = document.startViewTransition({ update, types })
Neue
ViewTransition
mit den angegebenen Typen startenupdate
wird aufgerufen, sobald der aktuelle Status des Dokuments erfasst wurde.Mit
types
werden die aktiven Typen für den Übergang beim Erfassen oder Ausführen des Übergangs festgelegt. Sie ist anfangs leer. Weitere Informationen finden Sie unten unterviewTransition.types
.
Instanzmitglieder von ViewTransition
:
viewTransition.updateCallbackDone
Ein Versprechen, das erfüllt wird, wenn das von
updateCallback
zurückgegebene Versprechen erfüllt wird, oder abgelehnt wird, wenn es abgelehnt wird.Die View Transition API umschließt eine DOM-Änderung und erstellt einen Übergang. Manchmal ist Ihnen jedoch nicht wichtig, ob die Übergangsanimation erfolgreich war oder nicht. Sie möchten nur wissen, ob und wann die DOM-Änderung erfolgt.
updateCallbackDone
ist für diesen Anwendungsfall geeignet.viewTransition.ready
Ein Versprechen, das erfüllt wird, sobald die Pseudoelemente für den Übergang erstellt wurden und die Animation gleich beginnt.
Wird abgelehnt, wenn der Übergang nicht beginnen kann. Das kann an einer fehlerhaften Konfiguration liegen, z. B. an doppelten
view-transition-name
s, oder wennupdateCallback
ein abgelehntes Versprechen zurückgibt.Das ist nützlich, um die Pseudoelemente für Übergänge mit JavaScript zu animieren.
viewTransition.finished
Ein Versprechen, das erfüllt wird, sobald der Endzustand für den Nutzer vollständig sichtbar und interaktiv ist.
Es wird nur abgelehnt, wenn
updateCallback
ein abgelehntes Promise zurückgibt, da dies darauf hinweist, dass der Endstatus nicht erstellt wurde.Andernfalls, wenn ein Übergang nicht gestartet wird oder während des Übergangs übersprungen wird, wird der Endstatus trotzdem erreicht, sodass
finished
erfüllt ist.viewTransition.types
Ein
Set
-ähnliches Objekt, das die Typen der aktiven Ansichtsübergänge enthält. Verwenden Sie die Instanzmethodenclear()
,add()
unddelete()
, um die Einträge zu bearbeiten.Um auf einen bestimmten Typ in CSS zu reagieren, verwenden Sie den Pseudoklassenselektor
:active-view-transition-type(type)
im Übergangsstamm.Die Typen werden automatisch bereinigt, wenn der Ansichtsübergang abgeschlossen ist.
viewTransition.skipTransition()
Animationsteil des Übergangs überspringen.
Dadurch wird der Aufruf von
updateCallback
nicht übersprungen, da die DOM-Änderung vom Übergang getrennt ist.
Referenz für Standardstil und Übergang
::view-transition
- Das Stamm-Pseudoelement, das den Darstellungsbereich ausfüllt und alle
::view-transition-group
enthält. ::view-transition-group
Absolut positioniert.
Übergänge
width
undheight
zwischen "Vorher" und „nachher“ Bundesländer.Übergänge
transform
zwischen "Vorher" und „nachher“ Darstellungsbereich-Quad.::view-transition-image-pair
Für diese Gruppe ist absolut bestens gerüstet.
isolation: isolate
muss die Auswirkungen dermix-blend-mode
auf die alte und die neue Ansicht begrenzen.::view-transition-new
und::view-transition-old
Absolut positioniert links oben im Wrapper.
Füllt 100 % der Gruppenbreite aus, hat aber eine automatische Höhe. Das Seitenverhältnis wird beibehalten, anstatt die Gruppe auszufüllen.
Enthält
mix-blend-mode: plus-lighter
, um eine echte Überblendung zu ermöglichen.Die alte Ansicht wird von
opacity: 1
aufopacity: 0
umgestellt. Die neue Ansicht wechselt vonopacity: 0
zuopacity: 1
.
Feedback
Wir freuen uns immer über Feedback von Entwicklern. Melden Sie dazu ein Problem bei der CSS Working Group auf GitHub und fügen Sie Vorschläge und Fragen hinzu. Stellen Sie dem Problem [css-view-transitions]
voran.
Sollten Sie auf einen Fehler stoßen, melden Sie den Fehler in Chromium.