Przejścia mają wiele zalet dla użytkowników, w tym pomagają utrzymać kontekst i zmniejszyć postrzeganie opóźnień. Deweloperzy chcą mieć możliwość tworzenia płynnych przejść między stronami, co pomaga zwiększyć zaangażowanie użytkowników w witrynie.
Włączenie przejść między stanami było jednak bardzo trudne, ponieważ wymagało od deweloperów zarządzania stanami 2 różnych elementów. Nawet proste przenikanie wymaga, aby oba stany były obecne w tym samym czasie. Stwarza to problemy z użytecznością, np. obsługą dodatkowych interakcji z elementem wychodzącym. W przypadku użytkowników urządzeń wspomagających występuje okres, w którym zarówno stan przed, jak i po zmianie są jednocześnie obecne w DOM. Ponadto elementy mogą się przesuwać w drzewie w sposób, który jest wizualnie akceptowalny, ale może łatwo spowodować utratę pozycji odczytu i skupienia.
Udostępniony w Chrome 111 interfejs View Transitions API umożliwia tworzenie płynnych i prostych przejść między stronami. Umożliwia to zmianę DOM bez nakładania się stanów i wyświetlanie animacji przejścia między stanami za pomocą zrzutów widoków.
Możesz się zastanawiać, jak łatwo jest wdrożyć tę funkcję. Jakie są przypadki użycia? Jak inni deweloperzy korzystają z przejść między widokami?
W tym artykule opisujemy wdrożenie przejść widoku w 4 różnych witrynach: RedBus (podróże), CyberAgent (wydawca wiadomości i blogów), Nykaa (e-commerce) i PolicyBazaar (ubezpieczenia). Wyjaśniamy też, jak te witryny skorzystały na użyciu interfejsu View Transitions API.
redBus
redBus, należący do grupy MakeMyTrip, to witryna do rezerwacji i sprzedaży biletów autobusowych z siedzibą w Bangalore w Indiach, która działa w różnych regionach na całym świecie. Była to jedna z pierwszych witryn, w której wdrożono funkcję korzystającą z interfejsu View Transitions API.
Dlaczego Redbus wdrożył przejścia widoku?
Zespół redBus wierzy w zapewnianie ujednoliconych wrażeń w internecie, które są jak najbardziej zbliżone do wrażeń z korzystania z aplikacji natywnych. W ciągu ostatnich lat wdrożyli wiele niestandardowych rozwiązań. Na przykład wdrożyli dostosowane animacje oparte na JavaScript i CSS na potrzeby przejść między stronami jeszcze przed opracowaniem interfejsu View Transitions API. Oznaczało to jednak, że musieli radzić sobie z zarządzaniem wydajnością w przypadku sieci i urządzeń o niższych parametrach, co czasami prowadziło do różnic w jakości działania przy zastosowanej strategii adaptacyjnego ładowania.
Firma redBus wykorzystała przejścia widoku w przypadku wielu ścieżek użytkowników. Na przykład w sekcji pomocy w aplikacji mobilnej, w której strony internetowe otwierały się na niestandardowych kartach Chrome, oraz w procesie rezerwacji biletów autobusowych, w którym użytkownicy przechodzą ze strony z listą produktów na stronę płatności. W tym drugim przypadku przejścia widoku sprawiły, że nawigacja między stronami stała się płynniejsza, co spowodowało wzrost współczynnika konwersji. Wynikało to z większej wygody użytkowników i lepszej postrzeganej wydajności podczas wykonywania operacji wymagających dużych zasobów, takich jak pobieranie najbardziej aktualnych dostępnych zasobów reklamowych.
Szczegóły techniczne implementacji
redBus używa Reacta i EJS jako technologii front-end, a także kombinacji aplikacji SPA i MPA w różnych ścieżkach. Poniższy fragment kodu pokazuje, jak używać przejść widoku:
/* 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();
}
};
W poniższym kodzie CSS slide-to-right, slide-to-left, slide-from-right i slide-from-left to klatki kluczowe animacji CSS.
::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;
}
Wpływ na firmę
Firma redBus zdecydowała się wdrożyć przejścia widoku wraz z działaniami na rzecz poprawy INP w całej witrynie, co doprowadziło do wzrostu sprzedaży o 7%. Amit Kumar, starszy menedżer ds. inżynierii w redBus, powiedział, że przejścia widoku są świetnym rozwiązaniem dla osób, które chcą poprawić wrażenia użytkowników i zmniejszyć nakłady na konserwację.
Przeprowadziliśmy kompleksowe sesje zbierania opinii użytkowników, uwzględniając cenne spostrzeżenia zróżnicowanej grupy użytkowników. Dzięki dogłębnej znajomości naszych użytkowników (korzystających z autobusów i pociągów) i ich potrzeb oraz naszej wiedzy uważamy, że ta funkcja od samego początku będzie miała dużą wartość i nie wymaga testów A/B. Przejścia widoku to krok w kierunku zmniejszenia różnic między aplikacjami a witrynami dzięki płynnemu przechodzeniu między stronami.
Anoop Menon, CTO redBus
CyberAgent
CyberAgent to japońska firma IT, która świadczy wiele usług online, w tym publikowanie blogów i wiadomości.
Dlaczego firma CyberAgent wdrożyła przejścia widoków?
Deweloper CyberAgent rozważał w przeszłości użycie animacji CSS lub frameworka do wdrożenia animowanych przejść w celu poprawy komfortu użytkowników, ale obawiał się niskiej wydajności renderowania DOM i utrzymania kodu. Gdy Chrome dodał obsługę interfejsu View Transitions API, zespół był podekscytowany możliwością tworzenia atrakcyjnych przejść między stronami, które rozwiązywały te problemy.
Firma CyberAgent wdrożyła przejścia widoku między listą blogów a stroną bloga. Zwróć uwagę, jak dodali przejście elementu do obrazu głównego. Możesz odwiedzić ich witrynę i sprawdzić ją na żywo już dziś.
Użyli też zapytań o multimedia, aby zaprojektować różne animacje na różne urządzenia. W przypadku stron mobilnych zastosowali przejścia między elementami, ale ten efekt był zbyt dynamiczny na komputerach.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Szczegóły techniczne implementacji
Firma CyberAgent używa Next.js do tworzenia aplikacji SPA. Poniższy przykładowy kod pokazuje, jak korzystają z interfejsu View Transition API.
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]);
};
Zobacz więcej przykładowego kodu Next.js.
Przejścia widoku w przypadku aplikacji MPA z technologią wstępnego renderowania
Firma CyberAgent wypróbowała też nasz nowy interfejs View Transitions API dla aplikacji wielostronicowych (obecnie pod flagą chrome://flags/#view-transition-on-navigation) w usłudze Ameba News, czyli w portalu informacyjnym.
Przejścia widoku zostały użyte w 2 miejscach: po pierwsze, podczas zmiany kategorii wiadomości, co widać na poniższym filmie.
Drugi to przejście między stroną z najważniejszymi informacjami, na której wyświetlany jest fragment treści, a momentem, w którym użytkownik klika Zobacz więcej szczegółów i wyświetla się reszta artykułu.
Ciekawostką jest to, że animację dodano tylko do części, która zmieni się po kliknięciu przycisku. Ta niewielka zmiana w projekcie animacji sprawia, że strona MPA wygląda z punktu widzenia użytkownika bardziej jak SPA, ponieważ animowane są tylko nowe treści:
Zrobili to, przypisując różne view-transition-name do różnych części strony. Na przykład przypisali 1 view-transition-name do górnej części artykułu, a drugi do dolnej, ale nie dodali animacji do górnej części.
::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;
}
Inną ciekawą rzeczą związaną z wykorzystaniem interfejsu View Transitions API przez CyberAgent jest to, że firma użyła quicklink, aby łatwo wdrożyć reguły wstępnego renderowania na stronie szczegółów. Oto przykładowy kod:
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}/`);
});
Więcej informacji o implementacji szybkich linków znajdziesz w tym artykule.
Opinia klienta
Kazunari Hara, kierownik techniczny usługi Ameba w firmie CyberAgent, powiedział, że przejścia widoku mogą mieć znaczący wpływ na firmę z 2 powodów.
Po pierwsze, prowadzą użytkowników po stronie. Przejścia widoku pozwalają wizualnie skupić uwagę użytkowników na najważniejszym przekazie i pomagają im w pełni wykorzystać potencjał strony internetowej. Dodatkowo wzmacniają i podkreślają markę za pomocą animacji. CyberAgent ma specjalny projekt animacji, który służy do komunikowania marki. Dzięki przejściom widoku mogą wdrożyć to rozwiązanie bezpłatnie związanych z utrzymaniem zewnętrznych bibliotek.
View Transitions to jeden z moich ulubionych interfejsów API. Możliwość dodawania animacji jako standardowej funkcji przeglądarki ułatwia wdrażanie i utrzymywanie przejść widoku w porównaniu z innymi rozwiązaniami zależnymi od bibliotek. Chcemy wdrożyć przejścia widoku w większej liczbie usług, aby komunikować naszą markę.
Kazunari Hara, CTO of Ameba
Nykaa
Nykaa to największa w Indiach platforma e-commerce z odzieżą i kosmetykami. Chcą, aby korzystanie z ich witryny mobilnej było jak najbardziej zbliżone do korzystania z aplikacji natywnej. Wcześniej, gdy próbowali wdrożyć animacje przejścia, mieli problemy z pisaniem złożonego niestandardowego kodu JavaScript. Miało to też niewielki wpływ na wydajność ich witryny.
Dlaczego firma Nykaa wdrożyła przejścia widoku?
Wraz z pojawieniem się przejść widoku zespół Nykaa dostrzegł szansę na znaczne ulepszenie UX przejść stron bez wpływu na wydajność, ponieważ przejścia te były dostępne natywnie. Firma Nykaa intensywnie korzysta z przejść widoku, aby przechodzić ze strony ze szczegółami produktu na stronę z listą produktów.
Szczegóły techniczne implementacji
Firma Nykaa użyła Reacta i Emotion do stworzenia aplikacji SPA. Więcej przykładowych kodów dotyczących używania przejść widoku w React znajdziesz tutaj.
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 do animacji szuflady bocznej:
::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};
}
Opinia klienta
Sunit Jindal, szef działu aplikacji w firmie Nykaa, powiedział, że największą zaletą przejścia widoku jest „wrażenie szybkości”. Firma Nykaa używała efektów połysku, aby poczekać na załadowanie treści z backendu, ale okazało się, że wyświetlanie efektu połysku nie informuje użytkowników, jak długo będą musieli czekać na załadowanie treści. Dzięki przejściom widoku użytkownicy mieli wrażenie, że „coś się wydarzy”, co sprawiało, że oczekiwanie było mniej uciążliwe.
Firma Nykaa była bardzo zadowolona z nowych, ulepszonych wrażeń użytkowników na stronie internetowej dzięki przejściom widoku i jest gotowa wdrożyć je na kolejnych stronach. Oto co powiedział wiceprezes ds. projektowania:
Zobowiązujemy się do wdrożenia przejść widoku we wszystkich nadchodzących funkcjach, w których będzie to miało sens. Niektóre obszary zostały już zidentyfikowane i zespół aktywnie w nie inwestuje.
Krishna R V, wiceprezes ds. projektowania
PolicyBazaar
PolicyBazaar to największy w Indiach agregator ubezpieczeń i międzynarodowa firma z branży technologii finansowych z siedzibą w Gurgaonie.
Dlaczego firma PolicyBazaar wdrożyła przejścia widoku?
Zespół PolicyBazaar, jako firma działająca w pierwszej kolejności w internecie, zawsze dążył do zapewnienia jak najlepszych wrażeń użytkownika na kluczowych etapach jego ścieżki. Jeszcze przed wprowadzeniem interfejsu View Transitions API powszechną praktyką było wdrażanie niestandardowych przejść za pomocą JavaScriptu i CSS, ponieważ poprawiały one komfort użytkowników, zapewniały płynną nawigację i zwiększały ogólną atrakcyjność wizualną witryn.
Jednak te niestandardowe implementacje wiązały się z okresowymi opóźnieniami wynikającymi z wydajności, złożonością konserwacji kodu i nieoptymalną zgodnością z używanymi platformami. Interfejs View Transitions API pomógł im pokonać większość tych wyzwań, ponieważ udostępnia łatwy w obsłudze interfejs z natywnymi korzyściami w zakresie wydajności.
Firma PolicyBazaar wykorzystała przejścia widoku w różnych elementach ścieżek przed wyceną, aby zachęcić potencjalnych kupujących do podania wymaganych szczegółów dotyczących zakupu polis ubezpieczeniowych.
Szczegóły techniczne implementacji
Korzystają z podejścia opartego na hybrydowych platformach, a większość ich kodu jest napisana w Angularze i Reacie. Oto fragment kodu VT napisany w Angularze i udostępniony przez Amana Soniego (głównego programistę interfejsu w 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');
}
Opinia klienta
Rishabh Mehrotra, szef zespołu projektowego (Life BU), powiedział, że przejścia widoku odegrały znaczącą rolę w poprawie wrażeń użytkowników witryny, zwiększając jej użyteczność, zaangażowanie i ogólną satysfakcję. Ułatwia to płynną nawigację, interakcję z użytkownikiem, zmniejsza obciążenie poznawcze, zapewnia nowoczesny wygląd i wiele innych korzyści.
Zapewnienie użytkownikom jak najlepszych wrażeń podczas korzystania z internetu jest dla PB najważniejszym celem, a VT okazało się niezwykle przydatnym narzędziem do jego osiągnięcia. Jego popularność zarówno wśród naszej społeczności deweloperów, jak i użytkowników napawa nasz zespół entuzjazmem. Rozważamy wdrożenie tego rozwiązania w różnych zespołach POD i spodziewamy się, że będzie ono miało dalekosiężny pozytywny wpływ na poziom zadowolenia i doskonałość operacyjną.
Saurabh Tiwari (CTO, PolicyBazaar)
Dalsze kroki
Chcesz wypróbować przejścia widoku? Oto kilka materiałów, z których możesz dowiedzieć się więcej: