Übergänge bieten Nutzern zahlreiche Vorteile, z. B. dass sie den Kontext beibehalten und die wahrgenommene Latenz verringern. Entwickler möchten nahtlose Übergänge zwischen Seiten erstellen, um die Nutzerinteraktion auf ihrer Website zu steigern.
Statusübergänge zu aktivieren war jedoch sehr schwierig, da Entwickler die Status zweier verschiedener Elemente verwalten mussten. Selbst bei einer einfachen Überblendung sind beide Zustände gleichzeitig vorhanden. Das führt zu Problemen bei der Nutzerfreundlichkeit, z. B. beim Umgang mit zusätzlichen Interaktionen mit dem ausgehenden Element. Für Nutzer von Hilfsmitteln gibt es einen Zeitraum, in dem sich sowohl der vorherige als auch der nachherige Zustand gleichzeitig im DOM befinden. Außerdem können sich Elemente im Baum so verschieben, dass es zwar optisch in Ordnung ist, aber leicht dazu führen kann, dass die Leseposition und der Fokus verloren gehen.
Die View Transitions API wurde in Chrome 111 eingeführt und ermöglicht die Erstellung reibungsloser und einfacher Übergänge zwischen Seiten. So können Sie das DOM ändern, ohne dass sich die Status überschneiden, und eine Übergangsanimation zwischen den Status mit Momentaufnahmen von Ansichten erstellen.
Sie fragen sich vielleicht, wie einfach die Implementierung ist. Welche Anwendungsfälle gibt es? Wie verwenden andere Entwickler Ansichtsübergänge?
In diesem Artikel wird die Implementierung von Ansichtsübergängen auf vier verschiedenen Websites beschrieben: RedBus (Reisen), CyberAgent (Nachrichten-/Blog-Publisher), Nykaa (E-Commerce) und PolicyBazaar (Versicherung). Außerdem wird erläutert, wie die Websites auf unterschiedliche Weise von der View Transitions API profitiert haben.
redBus
redBus ist Teil der MakeMyTrip-Gruppe und eine Website für die Buchung von Busfahrkarten mit Hauptsitz in Bangalore, Indien. Das Unternehmen ist weltweit in verschiedenen Regionen vertreten. Sie war eine der ersten Websites, auf denen die View Transitions API implementiert wurde.
Warum hat Redbus View Transitions implementiert?
Das Team von redBus ist davon überzeugt, dass eine einheitliche, app-ähnliche Weboberfläche, die ihren nativen Apps so nahe wie möglich kommt, die beste Lösung ist. Tatsächlich hatte das Unternehmen im Laufe der Jahre mehrere benutzerdefinierte Lösungen implementiert. Sie haben beispielsweise benutzerdefinierte JavaScript- und CSS-basierte Animationen für die Seitenübergänge eingeführt, noch bevor die View Transitions API entwickelt wurde. Das bedeutete jedoch, dass sie sich mit der Leistungsverwaltung in niedrigeren Segmenten von Netzwerk und Geräten auseinandersetzen mussten, was gelegentlich zu unterschiedlichen Erfahrungen mit einer adaptiven Ladestrategie führte.
redBus hat View-Übergänge für mehrere Nutzerpfade verwendet. Zum Beispiel im Selbsthilfe-Bereich ihrer mobilen App, in dem Webseiten auf benutzerdefinierten Chrome-Tabs geöffnet wurden, und im Buchungsprozess für Bustickets, in dem Nutzer von der Seite mit der Bestandsliste zur Zahlungsseite gelangen. Im letzteren Fall wurden durch die Ansichtsübergänge die Seitenübergänge flüssiger und die Conversion-Rate stieg. Das lag an der besseren Nutzerfreundlichkeit und der besseren wahrgenommenen Leistung während der Ausführung der rechenintensiven Vorgänge, z. B. des Abrufs des aktuellsten verfügbaren Inventars.
Technische Details der Implementierung
redBus verwendet React und EJS als Frontend-Technologie-Stack mit einer Kombination aus SPAs und MPAs für verschiedene Abläufe. Der folgende Codeausschnitt zeigt, wie Ansichtsübergänge verwendet werden:
/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
if(document.startViewTransition) {
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
})
} else {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
}
};
/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
if(document.startViewTransition) {
document.documentElement.classList.add('back-transition');
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.goBack() : history.back();
})
viewTransition.finished.finally(() => {
document.documentElement.classList.remove('back-transition');
})
} else {
reactHistory ? reactHistory.goBack() : history.back();
}
};
Im folgenden CSS sind slide-to-right, slide-to-left, slide-from-right und slide-from-left CSS-Animations-Keyframes.
::view-transition-old(root) {
animation: 300ms 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: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
Auswirkungen auf das Geschäft
redBus hat sich entschieden, View Transitions zusammen mit INP-Optimierungen auf seiner Website zu implementieren, was zu 7% mehr Verkäufen geführt hat. Amit Kumar, Senior Engineering Manager bei redBus, meint, dass Ansichtsübergänge wirklich toll für alle sind, die eine bessere Nutzerfreundlichkeit und weniger Wartungsaufwand wünschen.
Wir haben umfassende Feedbackrunden mit Nutzern durchgeführt und dabei wertvolle Erkenntnisse von einer vielfältigen Gruppe von Nutzern gewonnen. Wir kennen unsere Nutzer (Bus und Bahn) und ihre Bedürfnisse sehr gut. In Kombination mit unserem Fachwissen sind wir der Meinung, dass diese Funktion von Anfang an einen erheblichen Mehrwert bietet, ohne dass A/B-Tests erforderlich sind. Mit Ansichtsübergängen soll die Lücke zwischen App und Web durch eine reibungslose Navigation geschlossen werden.
Anoop Menon, CTO von redBus
CyberAgent
CyberAgent ist ein in Japan ansässiges IT-Unternehmen, das viele Onlinedienste anbietet, darunter Blog- und Nachrichtenveröffentlichungen.
Warum hat CyberAgent View Transitions implementiert?
CyberAgent hatte in der Vergangenheit erwogen, CSS-Animationen oder ein Framework zu verwenden, um animierte Übergänge zu implementieren und so die Nutzerfreundlichkeit zu verbessern. Das Unternehmen war jedoch besorgt über die schlechte Leistung beim Rendern von DOM und die Wartbarkeit des Codes. Als Chrome die View Transitions API unterstützte, freuten sie sich, sie für ansprechende Seitenübergänge zu nutzen, die diese Herausforderungen meisterten.
CyberAgent hat Ansichtsübergänge zwischen der Blogliste und der Blogseite implementiert. Hier sehen Sie, wie sie den Elementübergang zum Hero-Image hinzugefügt haben. Besuchen Sie die Website und sehen Sie sich die Funktionen selbst an.
Außerdem haben sie Media-Queries verwendet, um unterschiedliche Animationen für verschiedene Geräte zu erstellen. Für mobile Seiten wurden Elementübergänge verwendet, aber dieser Effekt war für Desktop-Computer zu unruhig.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Technische Details der Implementierung
CyberAgent verwendet Next.js, um die SPA zu erstellen. Das folgende Codebeispiel zeigt, wie sie die View Transition API verwenden.
export const usePageTransition = () => {
const router = useRouter();
const defferedRef = useRef<Deferred | null>(null);
useEffect(() => {
const handleRouteChangeComplete = () => {
defferedRef.current?.resolve();
};
const handleRouteChangeStart = (url: string) => {
if (!("startViewTransition" in document)) return;
if (router.asPath === url) return;
const deffered = new Deferred();
defferedRef.current = deffered;
(document as Document).startViewTransition(async () => {
await deffered.promise;
});
};
router.events.on("routeChangeStart", handleRouteChangeStart);
router.events.on("routeChangeComplete", handleRouteChangeComplete);
return () => {
router.events.off("routeChangeStart", handleRouteChangeStart);
router.events.off("routeChangeComplete", handleRouteChangeComplete);
};
}, [router.asPath]);
};
Übergänge für MPA mit Prerendering-Technologie ansehen
CyberAgent hat unsere neue View Transitions API für Multiple Page Apps (MPA) (derzeit unter dem Flag chrome://flags/#view-transition-on-navigation) auch für einen Dienst namens Ameba News getestet, ein Nachrichtenportal.
Übergänge wurden an zwei Stellen verwendet: zum einen beim Ändern der Nachrichtenkategorien, wie im folgenden Video zu sehen ist.
Die zweite ist zwischen der Seite mit den Nachrichten-Highlights, auf der ein Auszug des Inhalts angezeigt wird, und dem Moment, in dem der Nutzer auf Weitere Details klickt und der Rest des Artikels eingeblendet wird.
Interessant ist, dass sie nur den Teil animiert haben, der sich nach dem Klicken auf die Schaltfläche ändert. Durch diese kleine Änderung des Animationsdesigns wirkt die MPA-Seite aus Nutzersicht eher wie eine SPA, da nur die neuen Inhalte animiert werden:
Dazu haben sie den verschiedenen Teilen der Seite unterschiedliche view-transition-name zugewiesen. Sie haben beispielsweise dem oberen Teil des Artikels ein view-transition-name und dem unteren Teil ein anderes zugewiesen und dem oberen Teil keine Animation hinzugefügt.
::view-transition-old(root) {
animation:
var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
}
::view-transition-new(root) {
animation:
var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}
Ein weiterer interessanter Aspekt der Verwendung der View Transitions API durch CyberAgent ist, dass das Unternehmen quicklink verwendet hat, um Vorrenderungsregeln auf der Detailseite zu implementieren. Hier ist der Beispielcode:
import { prerender } from ‘https://.../quicklink.mjs’;
window.addEventListener('load', () => {
const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
if (!match) return;
const [_, dirname, entryId] = match;
prerender(`/${dirname}/${entryId}/`);
});
Weitere Informationen zur Implementierung von Quicklinks
Referenz
Kazunari Hara, Tech Lead des Ameba-Dienstes bei CyberAgent, sagte, dass die Ansichtsübergänge aus zwei Gründen erhebliche Auswirkungen auf das Geschäft haben könnten.
Erstens leiten sie Nutzer auf der Seite. Mit Ansichtsübergängen können Sie die Aufmerksamkeit der Nutzer visuell auf die wichtigste Botschaft lenken und ihnen helfen, die Webseite optimal zu nutzen. Außerdem wird die Marke durch Animationen hervorgehoben. CyberAgent hat ein spezielles Animationsdesign, um die Marke zu präsentieren. Mit Ansichtsübergängen können sie diese Markenidentität implementieren, ohne dass die Kosten für die Wartung externer Bibliotheken anfallen.
View Transitions ist eine meiner Lieblings-APIs. Da Animationen als Standardbrowserfunktion hinzugefügt werden können, sind Ansichtsübergänge im Vergleich zu anderen Lösungen, die von Bibliotheken abhängig sind, einfacher zu implementieren und zu warten. Wir freuen uns darauf, View Transitions in weiteren Diensten zu implementieren, um unsere Marke zu kommunizieren.
Kazunari Hara, CTO von Ameba
Nykaa
Nykaa ist die größte E-Commerce-Plattform für Mode und Beauty in Indien. Sie möchten, dass die mobile Weboberfläche ihrer nativen App so ähnlich wie möglich ist. Bei früheren Versuchen, Übergangsanimationen zu implementieren, hatten sie Schwierigkeiten, komplexes benutzerdefiniertes JavaScript zu schreiben. Dies wirkte sich auch geringfügig auf die Leistung der Website aus.
Warum hat Nykaa Ansichtsübergänge implementiert?
Mit der Einführung von Ansichtsübergängen sah das Team von Nykaa eine Möglichkeit, die UX von Seitenübergängen deutlich zu verbessern, ohne dass die Leistung darunter leidet. Nykaa verwendet View Transitions intensiv, um von der Produktdetailseite zur Produktlistenseite zu wechseln.
Technische Details der Implementierung
Nykaa hat React und Emotion verwendet, um die SPA zu erstellen. Hier finden Sie weiteren Beispielcode zur Verwendung von View Transitions mit React.
if (document.startViewTransition) {
document.startViewTransition(() => {
history.push(productUrl);
});
} else {
history.push(productUrl);
}
const fadeIn = keyframes`
from { opacity: 0; }
`;
const fadeOut = keyframes`
to { opacity: 0; }
`;
const slideFromRight = keyframes`
from { transform: translateX(300px); }
`;
const slideToLeft = keyframes`
to { transform: translateX(-300px); }
`;
const slideToRight = keyframes`
to { transform: translateX(300px); }
`;
const slideFromLeft = keyframes`
from { transform: translateX(-300px); }
`
CSS für die Animation der Seitenleiste:
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}
::view-transition-new(root) {
animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}
.back-transition {
display: inherit;
}
.back-transition::view-transition-old(root) {
animation-name: fade-out, ${slideToRight};
}
.back-transition::view-transition-new(root) {
animation-name: fade-in, ${slideFromLeft};
}
Referenz
Sunit Jindal, Leiter der App-Abteilung bei Nykaa, sagte, dass der größte Vorteil des Ansichtsübergangs die „Wahrnehmung von Geschwindigkeit“ sei. Nykaa hat Shimmer-Effekte verwendet, um zu warten, bis die Inhalte aus dem Backend geladen wurden. Das Unternehmen stellte jedoch fest, dass Nutzer durch die Anzeige des Shimmer-Effekts nicht erfuhren, wie lange sie auf das Laden der Inhalte warten mussten. Bei Ansichtsübergängen vermittelte der Übergang selbst den Nutzern das Gefühl, dass „etwas passieren wird“, was das Warten weniger unangenehm machte.
Nykaa war von der neuen, verbesserten UX der Webseite mit Ansichtsübergängen begeistert und möchte Ansichtsübergänge auch auf anderen Seiten implementieren. Das sagt der VP of Design:
Wir sind fest entschlossen, Ansichtsübergänge in allen anstehenden Funktionen zu implementieren, in denen sie sinnvoll sind. Einige Bereiche wurden bereits identifiziert und das Team investiert aktiv in diese.
Krishna R V, VP of Design
PolicyBazaar
PolicyBazaar mit Hauptsitz in Gurgaon ist Indiens größter Versicherungsaggregator und ein multinationales Finanztechnologieunternehmen.
Warum hat PolicyBazaar View Transitions implementiert?
Als Web-First-Unternehmen hat das Team von PolicyBazaar immer darauf geachtet, die bestmögliche Nutzerfreundlichkeit bei den wichtigsten Nutzeraktionen zu bieten. Es war schon vor der Einführung der View Transitions API üblich, benutzerdefinierte Übergänge mit JavaScript und CSS zu implementieren, da sie die Nutzerfreundlichkeit verbesserten, einen nahtlosen Navigationsfluss ermöglichten und die allgemeine visuelle Attraktivität der Websites steigerten.
Diese benutzerdefinierten Implementierungen führten jedoch zu gelegentlichen leistungsbedingten Verzögerungen, komplexer Codeverwaltung und suboptimaler Kompatibilität mit den verwendeten Frameworks. Die View Transitions API hat ihnen geholfen, die meisten dieser Herausforderungen zu meistern, da sie eine benutzerfreundliche Oberfläche mit nativen Leistungsvorteilen bietet.
PolicyBazaar hat Ansichtsübergänge für verschiedene Elemente in den Abläufen vor dem Angebot verwendet, um potenziellen Käufern die Angabe der erforderlichen Details für den Kauf von Versicherungen zu erleichtern.
Technische Details der Implementierung
Sie verwenden einen hybriden Framework-Ansatz, bei dem Angular und React den Großteil ihrer Codebasis ausmachen. Hier ist der VT-Ausschnitt aus dem in Angular geschriebenen Code, der von Aman Soni (Lead Frontend Developer bei PolicyBazaar) geteilt wurde:
toggleWidgetAnimation() {
let doc:any = document;
if (!doc.startViewTransition) {
this.toggleWidget();
return;
}
doc.startViewTransition(() => this.toggleWidget());
}
toggleWidget() {
let badgeEle = document.querySelector('.animate_init_state_one');
let textEle = document.querySelector('.animate_init_state_two');
badgeEle.classList.toggle('hide');
textEle.classList.toggle('hide');
}
Referenz
Rishabh Mehrotra, Head of Design (Life BU), sagte, dass Ansichtsübergänge eine wichtige Rolle bei der Verbesserung der Website für die Nutzer spielten, da sie die Nutzerfreundlichkeit, das Engagement und die allgemeine Zufriedenheit steigerten. Das hat zu einer reibungslosen Navigation, geführten Interaktion, geringeren kognitiven Belastung und einem modernen Erscheinungsbild beigetragen.
Die Verbesserung der Weboberfläche ist ein vorrangiges Ziel von PB. VT hat sich als wichtiges Tool erwiesen, um dies auf bemerkenswert nahtlose Weise zu erreichen. Die große Beliebtheit bei unserer Entwickler-Community und unseren Nutzern hat unser Team mit Enthusiasmus erfüllt. Wir gehen davon aus, dass die Integration in verschiedene PODs einen weitreichenden positiven Einfluss auf die Zufriedenheit und die operative Exzellenz haben wird.
Saurabh Tiwari (CTO, PolicyBazaar)
Nächste Schritte
Möchten Sie Ansichtsübergänge ausprobieren? Hier finden Sie einige Ressourcen, die Ihnen weitere Informationen bieten: