Overgangen hebben talloze voordelen voor gebruikers, waaronder het helpen om ze in hun context te houden en de perceptie van latentie te verminderen. Ontwikkelaars willen de mogelijkheid hebben om naadloze overgangen tussen pagina's te creëren, waardoor de betrokkenheid van gebruikers bij hun site wordt vergroot.
Het mogelijk maken van statusovergangen was echter erg moeilijk omdat ontwikkelaars de status van twee verschillende elementen moesten beheren. Zelfs zoiets als een simpele cross-fade houdt in dat beide toestanden tegelijkertijd aanwezig zijn. Dat brengt uitdagingen op het gebied van bruikbaarheid met zich mee, zoals het omgaan met extra interactie op het uitgaande element. Voor gebruikers van hulpmiddelen is er een periode waarin zowel de status 'voor' als 'na' zich tegelijkertijd in de DOM bevinden. Bovendien kunnen dingen door de boom bewegen op een manier die visueel prima is, maar er gemakkelijk voor kunnen zorgen dat de leespositie en focus verloren gaan.
De View Transitions API , gelanceerd in Chrome 111, maakt het mogelijk soepele en eenvoudige overgangen tussen pagina's te creëren. Hiermee kunt u uw DOM wijzigen zonder enige overlap tussen statussen, en kunt u een overgangsanimatie tussen de statussen maken met behulp van momentopnamen.
Je vraagt je misschien af: hoe eenvoudig is het te implementeren? Wat voor soort gebruiksscenario's zijn er? Hoe gebruiken andere ontwikkelaars weergaveovergangen?
Dit artikel neemt u mee door de implementatie van weergaveovergangen op 4 verschillende websites: RedBus (reizen), CyberAgent (nieuws-/bloguitgever), Nykaa (e-commerce) en PolicyBazaar (verzekeringen) en hoe hun websites op verschillende manieren profiteerden door het gebruik van de weergave Overgangen-API.
rodeBus
redBus, onderdeel van de MakeMyTrip-groep, is een website voor het boeken en ticketverkoop van bussen, met hoofdkantoor in Bangalore, India, en aanwezig in verschillende geografische gebieden over de hele wereld. 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 sterk in het bieden van een uniforme, app-achtige webervaring, een ervaring die zo dicht mogelijk bij hun eigen apps ligt. Sterker nog, ze hadden door de jaren heen meerdere maatwerkoplossingen geïmplementeerd. Ze hebben bijvoorbeeld aangepaste JavaScript- en CSS-gebaseerde animaties voor de pagina-overgangen uitgerold nog voordat de View Transitions API was ontwikkeld. Dat betekende echter dat ze te maken kregen met prestatiebeheer in lagere segmenten van netwerken en apparaten, wat af en toe leidde tot verschillende ervaringen met een adaptieve laadstrategie .
redBus gebruikte weergaveovergangen voor meerdere gebruikersreizen. Bijvoorbeeld in hun zelfhulpsectie binnen hun mobiele app, die webpagina's opende in aangepaste Chrome-tabbladen, en in hun busticketboekingstrechter waar gebruikers van de pagina met inventarislijsten naar de betalingspagina gaan. In het laatste geval zorgden de weergaveovergangen ervoor dat de navigatie van pagina naar pagina soepeler verliep en dat dit resulteerde in een verhoging van het conversiepercentage. Dit was het resultaat van een betere gebruikerservaring en beter waargenomen prestaties terwijl de zware handelingen, zoals het ophalen van de meest bijgewerkte beschikbare inventaris, werden uitgevoerd.
Technische details van de implementatie
redBus gebruikt React en EJS als hun frontend tech-stack, met een combinatie van SPA's en MPA's voor verschillende reizen. 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 en slide-from-left css-animatiehoofdframes.
::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 weergavetransities te implementeren samen met INP-verbeteringsinspanningen op hun hele site, wat leidde tot 7% meer omzet . Amit Kumar , Senior Engineering Manager bij redBus, zei dat weergaveovergangen echt geweldig zijn voor degenen die echt een betere gebruikerservaring willen en minder onderhoudsoverhead willen.
We hebben uitgebreide gebruikersfeedbacksessies gehouden, waarin waardevolle inzichten van een diverse groep gebruikers zijn verwerkt. Ons diepgaande inzicht in onze gebruikersbasis (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 de noodzaak van A/B-testen. Weergaveovergangen zijn een stap in de richting van het overbruggen van de kloof tussen app en internet met een soepele navigatie-ervaring.
Anoop Menon, CTO redBus
CyberAgent
CyberAgent is een in Japan gevestigd IT-bedrijf dat veel onlinediensten levert, waaronder het publiceren van blogs en nieuws.
Waarom heeft CyberAgent weergaveovergangen geïmplementeerd?
CyberAgent had in het verleden overwogen om CSS-animaties te gebruiken of een raamwerk te gebruiken om geanimeerde overgangen te implementeren om de gebruikerservaring te verbeteren, maar ze waren bezorgd over de slechte prestaties bij het weergeven van DOM en de onderhoudbaarheid van de code. Toen Chrome ondersteuning toevoegde voor de View transitions API, wilden ze deze graag gebruiken om boeiende paginaovergangen te maken die deze uitdagingen overwonnen.
CyberAgent implementeerde weergaveovergangen tussen de bloglijst en de blogpagina. Merk hier op hoe ze de elementovergang aan de heldenafbeelding hebben toegevoegd. Je kunt hun site bezoeken en het vandaag nog live ervaren.
Ze gebruikten ook mediaquery's om verschillende animatie-ervaringen voor verschillende apparaten te ontwerpen. Voor mobiele pagina's bevatten ze elementovergangen, 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 enkele voorbeelden van Next.js-code .
Bekijk overgangen voor MPA met prerendering-technologie
CyberAgent heeft ook onze nieuwe View Transitions API voor Multiple Page Apps (MPA) uitgeprobeerd (momenteel onder de vlag chrome://flags/#view-transition-on-navigation ) op een service genaamd Ameba News , een nieuwsportaalsite.
Op twee plaatsen werden weergaveovergangen gebruikt: De eerste is bij het wijzigen van de nieuwscategorieën, zoals weergegeven in de volgende video.
De tweede bevindt zich tussen de nieuwshoogtepuntpagina, waar een fragment van de inhoud wordt weergegeven, en wanneer de gebruiker op Meer details bekijken klikt, wordt de rest van het artikel vervaagd.
Het interessante punt is dat ze alleen animatie hebben toegevoegd aan het gedeelte dat verandert nadat op de knop wordt 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 inhoud wordt geanimeerd in:
Dit is hoe ze dit deden: ze gaven een andere view-transition-name aan de verschillende delen van de pagina. Ze hebben bijvoorbeeld één view-transition-name toegewezen aan het bovenste gedeelte van het artikel, een andere aan het onderste gedeelte, en geen animatie toegevoegd aan het bovenste gedeelte.
::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 CyberAgent's gebruik van de view transitions API is dat ze quicklink gebruikten om pre-renderingregels eenvoudig 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}/`);
});
In dit artikel kunt u meer lezen over hun quicklink-implementatie.
Getuigenis
Kazunari Hara, de Tech Lead van de Ameba-service in CyberAgent, zei dat de visietransities om twee redenen een aanzienlijke impact op het bedrijf kunnen hebben.
Ten eerste begeleiden ze gebruikers op de pagina. Met weergaveovergangen kunnen gebruikers visueel worden gefocust op de belangrijkste boodschap en kunnen ze het maximale uit de webpagina halen. Bovendien versterken en benadrukken ze het merk met animatie. CyberAgent heeft een speciaal animatieontwerp om hun merk te communiceren. Met weergavetransities kunnen ze deze merkervaring implementeren zonder de kosten voor het onderhouden van externe bibliotheken.
View Transitions is een van mijn favoriete API's. De mogelijkheid om animaties toe te voegen als standaard browserfunctie maakt weergaveovergangen eenvoudiger te implementeren en te onderhouden in vergelijking met andere oplossingen die afhankelijk zijn van bibliotheken. We kijken ernaar uit om beeldovergangen te implementeren naar meer diensten 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 om hun mobiele webervaring zo dicht mogelijk bij hun native app-ervaring te brengen. Toen ze eerder probeerden overgangsanimaties te implementeren, hadden ze moeite met het schrijven van complex aangepast JavaScript. Dit had ook een marginale invloed op de prestaties van hun website.
Waarom heeft Nykaa weergaveovergangen geïmplementeerd?
Met de komst van weergaveovergangen zag het team van Nykaa een kans waarbij deze overgangen native beschikbaar waren, wat betekende dat de UX van paginaovergangen aanzienlijk kon worden verbeterd zonder dat dit ten koste ging van de prestaties. Nykaa maakt intensief gebruik van weergaveovergangen om van de productdetailpagina naar de productvermeldingspagina over te gaan.
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 vindt u 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 voor zijlade-animatie:
::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 weergavetransitie de "perceptie van snelheid" was. Nykaa gebruikte de glinsteringseffecten om te wachten tot de inhoud vanuit de backend was geladen, maar ontdekte dat het tonen van het glinsteringseffect de gebruikers niet opleverde hoe lang ze zouden moeten wachten totdat de inhoud was geladen. Bij weergaveovergangen gaf de overgang zelf gebruikers het gevoel dat "er iets gaat gebeuren", waardoor het wachten minder pijnlijk werd.
Nykaa was erg enthousiast over de nieuw verbeterde UX van hun webpagina met weergaveovergangen, en is klaar om ook weergaveovergangen op extra pagina's te implementeren. Dit is wat hun VP Design zei:
We zijn bereid om weergaveovergangen te implementeren in alle aankomende functies waar dit zinvol is. Sommige gebieden zijn al geïdentificeerd en het team investeert daar actief in.
Krishna RV, VP Ontwerp
BeleidBazaar
PolicyBazaar, met hoofdkantoor in Gurgaon, is India's grootste verzekeringsaggregator en multinationale financiële technologiebedrijf.
Waarom heeft PolicyBazaar zichttransities geïmplementeerd?
Als een web-first bedrijf heeft het team van PolicyBazaar er altijd naar gestreefd de best mogelijke gebruikerservaring te bieden tijdens hun kritische gebruikerstrajecten. Het was gebruikelijk om aangepaste overgangen te implementeren met behulp van JavaScript en CSS, zelfs vóór de lancering van de View Transitions API, omdat ze de gebruikerservaring verbeterden, een naadloze navigatiestroom creëerden en de algehele visuele aantrekkingskracht van hun websites verbeterden.
Deze aangepaste implementaties gingen echter ten koste van incidentele prestatiegebaseerde vertragingen, complexiteit van codeonderhoud en suboptimale compatibiliteit met de gebruikte raamwerken. De View Transitions API heeft hen geholpen de meeste van deze uitdagingen te overwinnen door een eenvoudig te gebruiken interface te bieden met prestatievoordelen die standaard beschikbaar zijn.
PolicyBazaar gebruikte weergaveovergangen tussen verschillende elementen in hun traject voorafgaand aan de offerte om het voor potentiële kopers spannend te maken om de vereiste gegevens te verstrekken voor het kopen van verzekeringspolissen.
Technische details van de implementatie
Ze gebruiken een hybride raamwerkbenadering waarbij Angular en React het grootste deel van hun codebasis domineren. Hier is het VT-fragment uit hun code geschreven in Angular en gedeeld door Aman Soni (Lead Frontend Developer van 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 weergavetransities een belangrijke rol speelden bij het verbeteren van de website-ervaring voor hun gebruikers door de bruikbaarheid, betrokkenheid en algehele tevredenheid te verbeteren. Het hielp bij het bieden van soepele navigatie, begeleide interactie, verminderde cognitieve belasting, moderne esthetiek en nog veel meer.
Het verbeteren van de webervaring is een van de belangrijkste doelstellingen voor PB, en VT heeft bewezen een instrumenteel hulpmiddel te zijn om dit met opmerkelijke naadloosheid te bereiken. De wijdverspreide aantrekkingskracht ervan onder zowel onze ontwikkelaarsgemeenschap als onze gebruikersbasis heeft ons team met een gevoel van enthousiasme doordrenkt. Terwijl we de integratie ervan in verschillende POD's overwegen, verwachten we een verreikende positieve impact op de tevredenheidsniveaus en operationele uitmuntendheid.
Saurabh Tiwari (CTO, PolicyBazaar)
Volgende stappen
Bent u geïnteresseerd in het uitproberen van weergaveovergangen? Hier volgen enkele bronnen die u kunt raadplegen voor meer informatie: