Übergänge bieten den Nutzern zahlreiche Vorteile, zum Beispiel, dass sie im Kontext bleiben und die Wahrnehmung von Latenz reduziert wird. Entwickler möchten nahtlose Übergänge zwischen Seiten erstellen können, um das Interesse der Nutzer an ihrer Website zu steigern.
Zustandsübergänge zu aktivieren war jedoch sehr schwierig, da 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 in Ordnung ist, aber leicht dazu führen kann, dass die Leseposition und der Fokus verloren gehen.
Mit der in Chrome 111 eingeführten View Transitions API lassen sich reibungslose und einfache Übergänge zwischen Seiten erstellen. 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 Art von Anwendungsfällen 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 Leistungsmanagement in niedrigeren Netzwerk- und Gerätesegmenten zu befassen mussten, was gelegentlich zu unterschiedlichen Erfahrungen mit einer Strategie für adaptives Laden führte.
redBus verwendete Ansichtsübergänge für mehrere User Journeys. Zum Beispiel im Selbsthilfebereich der mobilen App, in der Webseiten auf benutzerdefinierten Chrome-Tabs geöffnet wurden, und im Buchungstrichter für Bustickets, wo Nutzer von der Seite mit der Inventarliste zur Zahlungsseite wechseln. 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 Nutzerfeedback-Sitzungen durchgeführt, bei denen wertvolle Erkenntnisse von einer vielfältigen Nutzergruppe berücksichtigt wurden. 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 reibungslosen 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 bereits in Betracht gezogen, CSS-Animationen zu verwenden oder ein Framework zu verwenden, um animierte Übergänge zu implementieren, um die Nutzererfahrung zu verbessern. Es war jedoch besorgt, dass das Rendern von DOM und Codeverwaltbarkeit schlecht war. 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. Hier sehen Sie, wie der Elementübergang zum Hero-Image hinzugefügt wurde. 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 Mobilseiten wurden Elementübergänge verwendet, die auf Computern 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]);
};
Sehen Sie sich weitere Next.js-Beispielcode an.
Ü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 dem Teil eine Animation hinzugefügt wurde, der sich nach dem Klicken auf die Schaltfläche ändert. Durch diese kleine Optimierung des Animationsdesigns wirkt die MPA-Seite aus der Sicht der Nutzer eher wie eine SPA, wobei nur der neue Inhalt animiert wird in:
Und so ging es: Sie haben den verschiedenen Teilen der Seite ein anderes view-transition-name zugewiesen. Beispielsweise wurde dem oberen Teil des Artikels eine view-transition-name und eine weitere für den unteren Teil des Artikels zugewiesen. Dem oberen Teil wurde 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 das Unternehmen Quicklinks verwendet hat, um Prerendering-Regeln auf der Detailseite ganz einfach 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 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 Markenerfahrung implementieren, ohne die Kosten für die Pflege externer Bibliotheken zu erhöhen.
„Übergänge ansehen“ ist eine meiner Lieblings-APIs. Die Möglichkeit, Animationen als Standard-Browserfunktion hinzuzufügen, erleichtert die Implementierung und Verwaltung von Übergängen von Ansichten im Vergleich zu anderen, von Bibliotheken abhängigen Lösungen. 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. Beim Implementieren von Übergangsanimationen hatten sie Schwierigkeiten beim Schreiben von komplexem benutzerdefiniertem JavaScript. 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. Weiteren Beispielcode für die Verwendung von „Übergänge ansehen“ 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 wurden. Bei Betrachtungsübergängen gab der Übergang selbst den Nutzenden das Gefühl, dass etwas passiert, was das Warten weniger mühsam machte.
Nykaa war sehr zufrieden mit der verbesserten Nutzerfreundlichkeit ihrer Website mit Ansichtsübergängen und ist bereit, Ansichtsübergänge auch auf weiteren Seiten zu implementieren. Das sagt die VP of Design:
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 eine Umstellung auf Aufrufe 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 gelegentliche leistungsbedingte Verzögerungen, komplexe Codewartung 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 die Übergänge zwischen verschiedenen Elementen in seinem Kaufprozess, um vor dem Angebot des Angebots die für den Abschluss von Versicherungspolicen erforderlichen Details anzugeben.
Technische Details zur Implementierung
Das Unternehmen verwendet einen Hybrid-Framework-Ansatz, bei dem Angular und React den Großteil der Codebasis dominieren. 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 (Life BU), erklärte, dass 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 Ansichtsübergänge ausprobieren? Hier finden Sie einige Ressourcen, die Ihnen weiterhelfen können: