Przejścia widoku to animowane i płynne przejścia między różnymi stanami strony internetowej lub interfejsu aplikacji. Interfejs View Transitions API został zaprojektowany tak, aby umożliwiać tworzenie tych efektów w prostszy i bardziej wydajny sposób niż wcześniej. Ten interfejs API ma wiele zalet w porównaniu z poprzednimi metodami JavaScript, w tym:
- Większa wygoda użytkowników: płynne przejścia i wskazówki wizualne pomagają użytkownikom po wprowadzeniu zmian w interfejsie, dzięki czemu nawigacja staje się naturalna i mniej irytująca.
- Ciągłość wizualna: zachowanie ciągłości między wyświetleniami zmniejsza obciążenie poznawcze i ułatwia użytkownikom skupienie się na aplikacji.
- Wydajność: interfejs API stara się używać jak najmniejszej liczby zasobów wątków głównych, co zapewnia płynniejsze animacje.
- Nowoczesna estetyka: ulepszone przejścia zapewniają dopracowane i atrakcyjne dla użytkowników wrażenia.
Ten post jest częścią serii, w której omawiamy, jak firmy e-commerce ulepszyły swoje strony internetowe za pomocą nowych funkcji CSS i interfejsu. Z tego artykułu dowiesz się, jak niektóre firmy wdrożyły interfejs View Transitions API i skorzystały z niego.
redBus
RedBus zawsze starał się, by interfejs natywny i internetowy był jak najbardziej spójny. Przed wprowadzeniem interfejsu View Transitions API implementacja tych animacji na naszych zasobach internetowych była wyzwaniem. Jednak korzystanie z interfejsu API ułatwia tworzenie przejść na różnych ścieżkach użytkowników, aby korzystanie z internetu przypominało aplikacje. To wszystko w połączeniu z większą wydajnością sprawia, że ta funkcja jest niezbędnym narzędziem we wszystkich witrynach – Amit Kumar, starszy menedżer techniczny, redBus.
Zespół wdrożył funkcję przenoszenia widoków w wielu miejscach. Oto przykład połączenia animacji rozjaśniania i przesuwania się ikony logowania na stronie głównej.
Kod
Ta implementacja używa wielu animacjiview-transition-namei niestandardowych (scale-down oraz scale-up). Użycie tagu view-transition-name z unikalną wartością oddziela komponent logowania od reszty strony, aby osobno animować go. Utworzenie nowego niepowtarzalnego elementu view-transition-name powoduje również utworzenie w pseudoelementowym drzewie nowego elementu ::view-transition-group (pokazanego w poniższym kodzie), co pozwala na sterowanie nim niezależnie od domyślnego elementu ::view-transition-group(root).
::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)
└─…
//Code for VT for login
if (!document.startViewTransition) {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
} else {
const transition = document.startViewTransition();
transition.ready.finally(() => {
setTimeout(() => {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
}, 500);
});
}
.signin_open {
view-transition-name: signin;
}
.signin_close {
view-transition-name: signinclose;
}
::view-transition-group(signin),
::view-transition-group(signinclose) {
animation-duration: 0.5s;
}
::view-transition-old(signin) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
animation-name: -ua-view-transition-fade-in, scale-up;
}
::view-transition-new(signinclose) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
@keyframes scale-down {
to {
scale: 0;
}
}
@keyframes scale-up {
from {
scale: 0;
}
}
Tokopedia
Za pomocą przejść widoku dodano animację zanikającą, gdy użytkownik przełącza się między miniaturami produktów.
Implementacja jest ogromna, ponieważ dzięki usłudze
startViewTransitionprzejście na zanikanie jest natychmiast przyjemniejsze w porównaniu z poprzednią (bez żadnych efektów) – Andy Wihalim, starszy inżynier oprogramowania, Tokopedia.
Przed
Po
Kod
Poniższy kod korzysta z platformy React i zawiera jej kod, np. flushSync.Dowiedz się więcej o pracy z platformami przy wdrażaniu przenoszenia widoków.
Jest to implementacja podstawowa, która sprawdza, czy przeglądarka obsługuje właściwość startViewTransition, a jeśli tak, to czy następuje przejście. W przeciwnym razie przywracane jest działanie domyślne.
const handleClick =
({ url, index }) =>
() => {
if ('startViewTransition' in document) { //check if browser supports VT
document.startViewTransition(() => {
flushSync(() => {
setDisplayImage({ url, index });
setActiveImageIndex(index);
});
});
} else { //if VT is not supported, fall back to default behavior
setDisplayImage({ url, index });
setActiveImageIndex(index);
}
};
...
<Thumbnail onClick={handleClick({url, index})} />
Policybazaar
Dział ds. inwestycji w firmie Policybazaar wykorzystał interfejs View Transitions API do wyświetlania wskazówek, takich jak „dlaczego warto kupić”, dzięki czemu są one atrakcyjne wizualnie i coraz skuteczniejsze.
Dzięki wprowadzeniu funkcji View Moves wyeliminowaliśmy powtarzający się kod CSS i JavaScript odpowiedzialny za zarządzanie animacjami w różnych stanach. Pozwoliło to zaoszczędzić nakłady pracy przy programowaniu i znacznie poprawić wygodę użytkowników – Aman Soni, kierownik ds. technicznych, Policybazaar.
Kod
Poniższy kod jest podobny do poprzednich przykładów. Warto zapamiętać, że można zastępować domyślne style i animacje w ::view-transition-old(root) i ::view-transition-new(root). W tym przypadku domyślna wartość animation-duration została zmieniona na 0,4 s.
togglePBAdvantagePopup(state: boolean) {
this.showPBAdvantagePopup = state;
if(!document.startViewTransition) {
changeState();
return;
}
document.startViewTransition(() => {changeState();});
function changeState() {
document.querySelector('.block_section').classList.toggle('hide');
document.querySelector('.righttoggle_box').classList.toggle('show');
}
}
.righttoggle_box{
view-transition-name: advantage-transition;
}
.block_section{
view-transition-name: advantage-transition;
}
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 0.4s;
}
Co warto wziąć pod uwagę podczas korzystania z interfejsu View Transitions API
Jeśli używasz na tej samej stronie wielu efektów przejścia między widokami, upewnij się, że każdy efekt lub sekcję ma inną nazwę, aby uniknąć konfliktów.
Gdy przejście widoku jest aktywne (przenoszenie), powoduje dodanie nowej warstwy na górze pozostałej części interfejsu. Unikaj więc uruchamiania przejścia po najechaniu kursorem, ponieważ zdarzenie mouseLeave zostanie wywołane nieoczekiwanie (gdy kursor jeszcze się nie porusza).
Zasoby
- Płynne i proste przechodzenie dzięki interfejsowi View Transitions API
- Wyjaśnienie: wyświetlanie przejść dla MPA
- Studium przypadku: bezproblemowa nawigacja dzięki widokom przejścia
- Studium przypadku: internet potrafi coś zrobić? | Korzystanie z nawigacji przypominającej aplikację
- Interop Proposal: udostępnij przejścia w widoku między przeglądarkami
- Czy chcesz zgłosić błąd czy poprosić o dodanie nowej funkcji? Chętnie poznamy Twoją opinię na temat SPA i MPA.
Zapoznaj się z innymi artykułami z tej serii, które przedstawiają korzyści dla firm z branży e-commerce dzięki zastosowaniu nowych funkcji CSS i interfejsu, takich jak animacje przewijane, wyskakujące okienka, zapytania o kontenery i selektor has().