Übergänge bieten zahlreiche Vorteile für Nutzer, z. B. dass sie den Kontext aufrechterhalten und die wahrgenommene Latenz reduzieren. Entwickler möchten nahtlose Übergänge zwischen Seiten erstellen, um die Nutzerinteraktion mit ihrer Website zu erhöhen.
Die Aktivierung von Statusübergängen war jedoch sehr schwierig, da die Entwickler die Status von zwei verschiedenen Elementen verwalten mussten. Selbst bei einem einfachen Cross-Fade sind beide Zustände gleichzeitig vorhanden. Das stellt Usability-Herausforderungen dar, z. B. die Verarbeitung zusätzlicher Interaktionen mit dem ausgehenden Element. Bei Nutzern von Hilfstechnologien gibt es einen Zeitraum, in dem sich sowohl der vorherige als auch der nachfolgende Zustand gleichzeitig im DOM befinden. Außerdem können sich Elemente im Stammbaum auf eine Weise bewegen, die zwar optisch ansprechend 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 flüssiger und einfacher Übergänge zwischen Seiten. So können Sie Ihre DOM-Änderungen ohne Überschneidungen zwischen den Status vornehmen und mithilfe von Snapshot-Ansichten eine Übergangsanimation zwischen den Status 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 erfahren Sie, wie die View Transitions API auf vier verschiedenen Websites implementiert wurde: RedBus (Reise), CyberAgent (Nachrichten-/Blog-Publisher), Nykaa (E-Commerce) und PolicyBazaar (Versicherung). Außerdem erfahren Sie, wie die Websites von der Verwendung der View Transitions API auf unterschiedliche Weise profitiert haben.
redBus
redBus ist eine Website für die Buchung und das Ticketing von Bussen. Sie gehört zur MakeMyTrip-Gruppe und hat ihren Sitz in Bangalore, Indien. Sie ist weltweit in verschiedenen Regionen vertreten. Es war eine der ersten Websites, auf denen eine Funktion mit der View Transitions API implementiert wurde.
Warum hat Redbus Ansichtsübergänge implementiert?
Das Team von redBus ist davon überzeugt, dass eine einheitliche, app-ähnliche Weboberfläche, die möglichst nah an den nativen Apps ist, die beste Lösung ist. Im Laufe der Jahre hatte das Unternehmen bereits mehrere benutzerdefinierte Lösungen implementiert. So wurden 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 den unteren Segmenten des Netzwerks und der Geräte befassen mussten, was gelegentlich zu unterschiedlichen Ergebnissen bei einer Strategie für das adaptive Laden führte.
redBus verwendete Ansichtsübergänge für mehrere Nutzerpfade. Beispielsweise im Hilfebereich der mobilen App, in dem Webseiten in benutzerdefinierten Chrome-Tabs geöffnet wurden, und im Buchungsvorgang für Bustickets, bei dem Nutzer von der Seite mit den Inventareinträgen zur Zahlungsseite weitergeleitet wurden. Im letzteren Fall haben Bildübergänge die Navigation zwischen den Seiten optimiert und zu einer Steigerung der Conversion-Rate geführt. Das lag an einer besseren Nutzerfreundlichkeit und einer höheren wahrgenommenen Leistung, während die ressourcenintensiven Vorgänge wie das Abrufen des aktuellsten verfügbaren Inventars ausgeführt wurden.
Technische Details zur Implementierung
redBus verwendet React und EJS als Frontend-Technologie-Stack mit einer Kombination aus SPAs und MPAs für verschiedene Aufrufabfolgen. Im folgenden Codeausschnitt wird gezeigt, 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 keyframes für CSS-Animationen.
::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 implementierte Bildübergänge und verbesserte die INP auf seiner Website. Das führte zu 7% mehr Verkäufen. Amit Kumar, Senior Engineering Manager bei redBus, sagte, dass Ansichtsübergänge wirklich toll für diejenigen sind, die sich eine bessere Nutzererfahrung und weniger Wartungsaufwand wünschen.
Wir haben umfassende Feedbackrunden mit Nutzern durchgeführt und wertvolle Erkenntnisse von einer vielfältigen Gruppe von Nutzern eingeholt. Unser umfassendes Verständnis unserer Nutzer (Bus und Bahn) und ihrer Anforderungen in Kombination mit unserem Fachwissen haben uns zu der Überzeugung gebracht, dass diese Funktion von Anfang an einen erheblichen Mehrwert bietet, ohne dass A/B-Tests erforderlich sind. Ansichtsübergänge sind ein Schritt in Richtung einer nahtlosen Navigation zwischen App und Web.
Anoop Menon, CTO von redBus
CyberAgent
CyberAgent ist ein japanisches IT-Unternehmen, das viele Onlinedienste anbietet, darunter Blog- und Nachrichtenveröffentlichungen.
Warum hat CyberAgent Ansichtsübergänge implementiert?
CyberAgent hatte in der Vergangenheit erwogen, CSS-Animationen oder ein Framework zu verwenden, um animierte Übergänge zu implementieren und die Nutzerfreundlichkeit zu verbessern. Es gab jedoch Bedenken hinsichtlich der schlechten Leistung beim Rendern des DOM und der Codewartung. Als Chrome die Unterstützung für die View Transitions API hinzufügte, war er begeistert, damit ansprechende Seitenübergänge zu erstellen, die diese Herausforderungen überwinden.
CyberAgent hat Ansichtsübergänge zwischen der Blogliste und der Blogseite implementiert. Beachten Sie, wie der Designer dem Hero-Image den Elementübergang hinzugefügt hat. Besuchen Sie die Website und sehen Sie sich die Funktion live an.
Außerdem wurden Media-Queries verwendet, um unterschiedliche Animationen für verschiedene Geräte zu entwerfen. Für die mobilen Seiten wurden Elementübergänge verwendet, die auf dem Computer jedoch zu viel Bewegung verursachten.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Technische Details zur Implementierung
CyberAgent verwendet Next.js, um seine SPA zu erstellen. Im folgenden Codebeispiel wird gezeigt, wie die View Transition API verwendet wird.
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]);
};
Weitere Beispiele für Next.js-Code
Übergänge für MPAs mit Pre-Rendering-Technologie ansehen
CyberAgent hat auch unsere neue View Transitions API für Apps mit mehreren Seiten (MPA) (aktuell mit dem Flag chrome://flags/#view-transition-on-navigation) in einem Dienst namens Ameba News getestet, einem Nachrichtenportal.
Ansichtsübergänge wurden an zwei Stellen verwendet: Zum einen beim Wechseln der Kategorien der Nachrichten, wie im folgenden Video zu sehen.
Die zweite ist zwischen der Seite mit den Nachrichtenhöhepunkten, auf der ein Auszug aus den Inhalten angezeigt wird, und wenn der Nutzer auf Weitere Details ansehen klickt, wird der Rest des Artikels eingeblendet.
Interessant ist, dass nur der Teil animiert wurde, der sich nach dem Klicken auf die Schaltfläche ändert. Durch diese kleine Änderung des Animationsdesigns wirkt die MPA-Seite aus Sicht der Nutzer eher wie eine SPA, da nur die neuen Inhalte animiert werden:
So ging das: Sie haben den verschiedenen Seitenbereichen eine unterschiedliche view-transition-name zugewiesen. Er hat beispielsweise dem oberen Teil des Artikels eine view-transition-name und dem unteren Teil eine andere 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 weiteres interessantes Detail bei der Verwendung der View Transitions API durch CyberAgent ist, dass sie einen Quicklink verwendet haben, um ganz einfach Prerendering-Regeln 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 Direktlinks finden Sie in diesem Artikel.
Referenz
Kazunari Hara, der Tech Lead des Ameba-Dienstes bei CyberAgent, sagte, dass die Aufrufübergänge aus zwei Gründen erhebliche Auswirkungen auf das Geschäft haben könnten.
Erstens leiten sie die 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 Website optimal zu nutzen. Außerdem heben sie die Marke mit Animationen hervor. CyberAgent hat ein bestimmtes Animationsdesign, um seine Marke zu kommunizieren. Mit Ansichtsübergängen können sie diese Branding-Funktion implementieren, ohne die Kosten für die Pflege externer Bibliotheken zu erhöhen.
Die View Transitions API ist eine meiner Lieblings-APIs. Da Sie Animationen als Standardbrowserfunktion hinzufügen können, sind Ansichtsübergänge im Vergleich zu anderen Lösungen, die von Bibliotheken abhängig sind, einfacher zu implementieren und zu verwalten. Wir freuen uns darauf, die Ansichtsübergänge in weiteren Diensten zu implementieren, um unsere Marke zu präsentieren.
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 Website so nah wie möglich an die native App herankommt. Bei früheren Versuchen, Übergangsanimationen zu implementieren, hatte er Schwierigkeiten, komplexe benutzerdefinierte JavaScript-Code 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 Chance, die Nutzerfreundlichkeit von Seitenübergängen ohne Leistungseinbußen deutlich zu verbessern. Nykaa verwendet häufig Bildübergänge, um von der Produktdetailseite zur Produktlistenseite zu wechseln.
Technische Details zur Implementierung
Nykaa hat React und Emotion verwendet, um sein SPA zu erstellen. Weitere Beispielcodes zur Verwendung von Ansichtsübergängen mit React finden Sie hier.
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 seitlichen Schublade:
::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, der Leiter der App-Entwicklung bei Nykaa, sagte, dass der größte Vorteil der Ansichtsübergänge die „Wahrnehmung der Geschwindigkeit“ sei. Nykaa nutzte Shimmer-Effekte, um zu warten, bis die Inhalte aus dem Backend geladen wurden. Die Nutzer konnten jedoch nicht erkennen, wie lange sie warten mussten, bis die Inhalte geladen waren. Bei Ansichtsübergängen vermittelte der Übergang selbst den Nutzern das Gefühl, dass „bald etwas passiert“, was das Warten erträglicher machte.
Nykaa war sehr zufrieden mit der verbesserten UX ihrer Website mit Ansichtsübergängen und ist bereit, Ansichtsübergänge auch auf weiteren Seiten zu implementieren. Der Vizepräsident für Design von Google hat dazu Folgendes gesagt:
Wir sind bestrebt, in allen kommenden Funktionen, in denen es sinnvoll ist, Ansichtsübergänge zu implementieren. 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 der größte Versicherungsaggregator und multinationale Finanztechnologieanbieter in Indien.
Warum hat PolicyBazaar Ansichtsübergänge implementiert?
Als Web-first-Unternehmen hat das PolicyBazaar-Team immer darauf geachtet, die bestmögliche Nutzererfahrung in allen wichtigen Phasen des Kaufprozesses zu bieten. Schon vor der Einführung der View Transitions API war es üblich, benutzerdefinierte Übergänge mit JavaScript und CSS zu implementieren, da sie die Nutzerfreundlichkeit verbesserten, einen nahtlosen Navigationsfluss ermöglichten und die visuelle Attraktivität der Websites insgesamt verbesserten.
Diese benutzerdefinierten Implementierungen hatten jedoch gelegentlich leistungsbedingte Verzögerungen, eine komplexe Codeverwaltung und eine suboptimale Kompatibilität mit den verwendeten Frameworks zur Folge. Mit der View Transitions API konnte das Team die meisten dieser Herausforderungen meistern, da sie eine nutzerfreundliche Oberfläche mit nativ verfügbaren Leistungsvorteilen bietet.
PolicyBazaar nutzte Ansichtsübergänge zwischen verschiedenen Elementen in den Vorab-Anfrageprozessen, um es potenziellen Käufern möglichst einfach zu machen, die erforderlichen Angaben für den Kauf von Versicherungspolicen zu machen.
Technische Details zur Implementierung
Das Unternehmen verwendet einen Hybrid-Framework-Ansatz, wobei Angular und React den Großteil der Codebasis ausmachen. Hier ist der VT-Auszug aus dem Code, der in Angular geschrieben wurde und von Aman Soni (Lead Frontend Developer von 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, Leiter des Designteams für die Life-BU, erklärte, dass die Bildübergänge eine wichtige Rolle bei der Verbesserung der Websitenutzung für die Nutzer gespielt haben, da sie die Nutzerfreundlichkeit, Interaktion und allgemeine Zufriedenheit verbessert haben. So konnten wir unter anderem eine reibungslose Navigation, eine geführte Interaktion, eine reduzierte kognitive Belastung und eine moderne Ästhetik ermöglichen.
Die Verbesserung der Webnutzung ist ein wichtiges Ziel für PB. VT hat sich als unverzichtbares Tool erwiesen, um dies auf bemerkenswerte Weise zu erreichen. Die große Beliebtheit bei unserer Entwickler- und Nutzerschaft hat unser Team begeistert. Wir gehen davon aus, dass die Integration in verschiedenen PODs weitreichende positive Auswirkungen auf die Zufriedenheit und die operative Exzellenz haben wird.
Saurabh Tiwari (CTO, PolicyBazaar)
Nächste Schritte
Möchtest du die Ansichtsübergänge ausprobieren? Hier finden Sie einige Ressourcen, die Ihnen weiterhelfen können: