Overgangen bieden talloze voordelen voor gebruikers, waaronder contextuele aanpassingen en een lagere latentie. Ontwikkelaars willen naadloze overgangen tussen pagina's kunnen creëren, wat de betrokkenheid van gebruikers bij hun site vergroot.
Het inschakelen van statusovergangen was echter erg lastig , omdat ontwikkelaars de statussen van twee verschillende elementen moesten beheren. Zelfs iets als een simpele cross-fade vereist dat beide statussen tegelijkertijd aanwezig zijn. Dat levert uitdagingen op voor de bruikbaarheid, zoals het verwerken van extra interactie op het uitgaande element. Voor gebruikers van hulpmiddelen is er een periode waarin zowel de status voor als na de status tegelijkertijd in de DOM staan. Bovendien kunnen dingen in de boomstructuur bewegen op een manier die visueel prima is, maar gemakkelijk kan leiden tot verlies van leespositie en focus.
De View Transitions API, gelanceerd in Chrome 111, maakt het mogelijk om vloeiende en eenvoudige overgangen tussen pagina's te creëren. Hiermee kunt u uw DOM-wijzigingen doorvoeren zonder overlapping tussen statussen en een overgangsanimatie tussen de statussen weergeven met behulp van snapshots.
Je vraagt je misschien af: hoe eenvoudig is het te implementeren? Wat voor use cases zijn er? Hoe gebruiken andere ontwikkelaars weergaveovergangen?
In dit artikel leest u over de implementatie van weergaveovergangen op vier verschillende websites: RedBus (reizen), CyberAgent (nieuws-/bloguitgever), Nykaa (e-commerce) en PolicyBazaar (verzekeringen). Ook leest u hoe hun websites op verschillende manieren profiteren van het gebruik van de View Transitions API.
rodeBus
redBus, onderdeel van de MakeMyTrip Group, is een website voor busreserveringen en -tickets met hoofdkantoor in Bangalore, India, en is actief in verschillende regio's wereldwijd. Het was een van de eerste websites die een ervaring implementeerde met behulp van de View Transitions API.
Waarom heeft Redbus weergaveovergangen geïmplementeerd?
Het team van redBus gelooft heilig in het bieden van een uniforme, app-achtige webervaring die zo dicht mogelijk bij hun native apps ligt. Sterker nog, ze hebben in de loop der jaren meerdere maatwerkoplossingen geïmplementeerd. Zo introduceerden ze al aangepaste JavaScript- en CSS-animaties voor de paginaovergangen, nog vóór de ontwikkeling van de View Transitions API. Dit betekende echter dat ze te maken kregen met prestatiebeheer in lagere netwerk- en apparaatsegmenten, wat soms leidde tot een afwijkende ervaring met een adaptieve laadstrategie .
RedBus gebruikte weergaveovergangen voor meerdere gebruikerstrajecten. Bijvoorbeeld in hun zelfhulpsectie in hun mobiele app, die webpagina's opende in aangepaste Chrome-tabbladen, en in hun boekingsfunnel voor bustickets, waar gebruikers van de inventarislijst naar de betaalpagina gaan. In het laatste geval zorgden weergaveovergangen voor een soepelere navigatie tussen pagina's en een hogere conversieratio. Dit was het resultaat van een betere gebruikerservaring en beter waargenomen prestaties terwijl de zwaardere bewerkingen, zoals het ophalen van de meest actuele beschikbare inventaris, werden uitgevoerd.
Technische details van de implementatie
redBus gebruikt React en EJS als frontend-tech stack, met een combinatie van SPA's en MPA's voor verschillende journeys. Het volgende codefragment laat zien hoe weergaveovergangen worden gebruikt:
/* 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();
}
};
In de volgende CSS zijn slide-to-right , slide-to-left , slide-from-right slide-from-left css-animatie-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;
}
Zakelijke impact
RedBus koos ervoor om weergaveovergangen te implementeren in combinatie met INP-verbeteringen op hun hele website, wat resulteerde in 7% meer omzet . Amit Kumar , Senior Engineering Manager bij redBus, zei dat weergaveovergangen echt geweldig zijn voor diegenen die echt een betere gebruikerservaring willen en minder onderhoudskosten.
We hebben uitgebreide gebruikersfeedbacksessies gehouden, waarbij we waardevolle inzichten van een diverse groep gebruikers hebben verwerkt. Onze diepgaande kennis van onze gebruikers (bus en trein) en hun behoeften, gecombineerd met onze expertise, heeft ons doen geloven dat deze functie vanaf het begin aanzienlijke waarde zal bieden, zonder dat A/B-testen nodig zijn. Weergaveovergangen zijn een stap in de richting van het overbruggen van de kloof tussen app en web met een soepele navigatie-ervaring.
Anoop Menon, technisch directeur van redBus
CyberAgent
CyberAgent is een Japans IT-bedrijf dat veel onlinediensten levert, waaronder blogs en nieuwspublicaties.
Waarom heeft CyberAgent weergaveovergangen geïmplementeerd?
CyberAgent had in het verleden overwogen om CSS-animaties te gebruiken of een framework te gebruiken om geanimeerde overgangen te implementeren om de gebruikerservaring te verbeteren, maar ze maakten zich zorgen over de slechte prestaties bij het renderen van DOM en het onderhoud van de code. Toen Chrome ondersteuning voor de View transitions API toevoegde, waren ze enthousiast om deze te gebruiken om aantrekkelijke paginaovergangen te creëren die deze uitdagingen overwonnen.
CyberAgent heeft weergaveovergangen geïmplementeerd tussen de bloglijst en de blogpagina. Let hier op hoe ze het element 'overgang' hebben toegevoegd aan de hero-afbeelding. Je kunt hun website vandaag nog bezoeken en het live bekijken.
Ze gebruikten ook media queries om verschillende animatie-ervaringen voor verschillende apparaten te ontwerpen. Voor mobiele pagina's voegden ze elementovergangen toe, maar dit effect had te veel beweging voor desktop.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Technische details van de implementatie
CyberAgent gebruikt Next.js om hun SPA te bouwen. Het volgende codevoorbeeld laat zien hoe ze de View Transition API gebruiken.
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]);
};
Bekijk nog meer voorbeelden van Next.js-code .
Bekijk overgangen voor MPA met prerenderingtechnologie
CyberAgent heeft ook onze nieuwe View Transitions API voor Multiple Page Apps (MPA) (momenteel onder de vlag chrome://flags/#view-transition-on-navigation ) uitgeprobeerd op een service genaamd Ameba News , een nieuwsportalsite.
Weergaveovergangen werden op twee plaatsen gebruikt. De eerste is bij het wijzigen van de nieuwscategorieën, zoals te zien is in de onderstaande video.
De tweede bevindt zich tussen de nieuwshighlightpagina, waar een fragment van de inhoud wordt getoond, en wanneer de gebruiker klikt op ' Zie meer details' , wordt de rest van het artikel getoond.
Het interessante is dat ze alleen animatie hebben toegevoegd aan het gedeelte dat verandert nadat er op de knop is geklikt. Deze kleine aanpassing van het animatieontwerp zorgt ervoor dat de MPA-pagina vanuit het oogpunt van de gebruiker meer op een SPA lijkt, waarbij alleen de nieuwe content wordt geanimeerd:
Zo deden ze dat: ze gaven de verschillende delen van de pagina een andere view-transition-name . Zo gaven ze bijvoorbeeld één view-transition-name aan het bovenste deel van het artikel, een andere voor het onderste deel, en voegden ze geen animatie toe aan het bovenste deel.
::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;
}
Een ander interessant aspect van CyberAgents gebruik van de API voor weergaveovergangen is dat ze QuickLink hebben gebruikt om eenvoudig prerenderingregels op de detailpagina te implementeren. Hier is hun voorbeeldcode:
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}/`);
});
Meer over hun quicklink-implementatie kunt u lezen in dit artikel .
Getuigenis
Kazunari Hara, Tech Lead van de Ameba-service bij CyberAgent, gaf aan dat de weergaveovergangen om twee redenen een aanzienlijke impact op de business kunnen hebben.
Ten eerste begeleiden ze gebruikers op de pagina. Weergaveovergangen maken het mogelijk om gebruikers visueel te focussen op de belangrijkste boodschap en helpen hen het maximale uit de webpagina te halen. Bovendien versterken en benadrukken ze het merk met animaties. CyberAgent heeft een speciaal animatieontwerp om hun merk te communiceren. Met weergaveovergangen kunnen ze deze merkbeleving implementeren zonder de kosten van het onderhouden van externe bibliotheken.
View Transitions is een van mijn favoriete API's. De mogelijkheid om animaties toe te voegen als standaardbrowserfunctie maakt weergaveovergangen eenvoudiger te implementeren en te onderhouden in vergelijking met andere oplossingen die afhankelijk zijn van bibliotheken. We kijken ernaar uit om weergaveovergangen te implementeren in meer services om ons merk te communiceren.
Kazunari Hara, CTO van Ameba
Nykaa
Nykaa is India's grootste e-commerceplatform voor mode en beauty. Ze streven ernaar hun mobiele webervaring zo dicht mogelijk bij hun native app-ervaring te brengen. Bij eerdere pogingen om overgangsanimaties te implementeren, worstelden ze met het schrijven van complexe, aangepaste JavaScript-code. Dit had ook een kleine impact op de prestaties van hun website.
Waarom heeft Nykaa weergaveovergangen geïmplementeerd?
Met de komst van weergaveovergangen zag Nykaa's team een kans: de standaard beschikbaarheid van deze overgangen betekende dat de gebruikerservaring aanzienlijk verbeterd kon worden zonder dat dit ten koste ging van de prestaties. Nykaa maakt veelvuldig gebruik van weergaveovergangen voor de overgang van de productdetailpagina naar de productlijstpagina.
Technische details van de implementatie
Nykaa gebruikte React en Emotion om hun SPA te bouwen. Meer voorbeeldcode over het gebruik van View Transitions met React is hier te vinden.
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 voor animatie van zijlade:
::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};
}
Getuigenis
Sunit Jindal , hoofd apps bij Nykaa, zei dat het grootste voordeel van de weergaveovergang de "snelheidsperceptie" was. Nykaa gebruikte de shimmereffecten om te wachten tot de content vanuit de backend geladen was, maar ontdekte dat het tonen van het shimmereffect gebruikers niet vertelde hoe lang ze moesten wachten tot de content geladen was. Bij weergaveovergangen gaf de overgang zelf gebruikers het gevoel dat er "iets ging gebeuren", wat het wachten minder pijnlijk maakte.
Nykaa was erg enthousiast over de nieuwe, verbeterde UX van hun webpagina met weergaveovergangen en is klaar om weergaveovergangen ook op andere pagina's te implementeren. Dit is wat hun VP Design zei:
We hebben ons er nadrukkelijk toe verbonden om weergaveovergangen te implementeren in alle toekomstige functies waar dat zinvol is. Een aantal aspecten zijn al geïdentificeerd en het team investeert daar actief in.
Krishna RV, VP van Design
PolicyBazaar
PolicyBazaar, met hoofdkantoor in Gurgaon, is India's grootste verzekeringsaggregator en multinationale financiële technologiebedrijf.
Waarom heeft PolicyBazaar weergaveovergangen geïmplementeerd?
Als webgericht bedrijf heeft het team van PolicyBazaar er altijd naar gestreefd om de best mogelijke gebruikerservaring te bieden tijdens hun kritische gebruikersreizen. Het was gebruikelijk om aangepaste overgangen te implementeren met behulp van JavaScript en CSS, zelfs vóór de lancering van de View Transitions API. Dit verbeterde de gebruikerservaring, zorgde voor een naadloze navigatie en verbeterde de algehele visuele aantrekkingskracht van hun websites.
Deze maatwerkimplementaties gingen echter gepaard met incidentele prestatievertragingen, complexe codeonderhoudswerkzaamheden en suboptimale compatibiliteit met de gebruikte frameworks. De View Transitions API hielp hen de meeste van deze uitdagingen te overwinnen door een gebruiksvriendelijke interface te bieden met standaard beschikbare prestatievoordelen.
PolicyBazaar gebruikte weergaveovergangen bij verschillende elementen in hun traject voorafgaand aan de offerte, om het voor potentiële kopers aantrekkelijk te maken om de benodigde gegevens te verstrekken voor het kopen van een verzekeringspolis.
Technische details van de implementatie
Ze gebruiken een hybride framework-aanpak, waarbij Angular en React het grootste deel van hun codebase domineren. Hier is een VT-fragment uit hun code, geschreven in Angular en gedeeld door Aman Soni (Lead Frontend Developer bij PolicyBazaar):
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');
}
Getuigenis
Rishabh Mehrotra, hoofd Design (Life BU), zei dat weergaveovergangen een belangrijke rol speelden in het verbeteren van de website-ervaring voor hun gebruikers door de bruikbaarheid, betrokkenheid en algehele tevredenheid te verbeteren. Het zorgde voor soepele navigatie, begeleide interactie, verminderde cognitieve belasting, moderne esthetiek en nog veel meer.
Het verbeteren van de webervaring is een van de belangrijkste doelstellingen van PB, en VT heeft bewezen een instrument te zijn om dit met opmerkelijke soepelheid te bereiken. De brede aantrekkingskracht ervan, zowel bij onze ontwikkelaarscommunity als bij onze gebruikers, heeft ons team met enthousiasme vervuld. Nu we de integratie ervan in diverse POD's overwegen, verwachten we een verreikende positieve impact op de klanttevredenheid en operationele uitmuntendheid.
Saurabh Tiwari (CTO, PolicyBazaar)
Volgende stappen
Ben je geïnteresseerd in het uitproberen van weergaveovergangen? Hier zijn een paar bronnen die je kunt raadplegen voor meer informatie: