Przejścia widoku to animowane i płynne przejścia między różnymi stanami strony internetowej lub interfejsu aplikacji. Interfejs View Przenoszenie API został zaprojektowany tak, aby umożliwić tworzenie tych efektów w prostszy i wydajniejszy sposób niż do tej pory. Interfejs API ma wiele zalet w porównaniu z wcześniejszymi metodami JavaScript, w tym:
- Większa wygoda użytkowników: płynne przejścia i wskazówki wizualne pomagają użytkownikom poruszać się po zmianach w interfejsie, sprawiając, że nawigacja jest naturalne, a jednocześnie mniej irytujący.
- Ciągłość wizualna: utrzymanie poczucia ciągłości między widokami zmniejsza obciążenie poznawcze i pomaga użytkownikom skupić się na aplikacji.
- Wydajność: interfejs API próbuje używać jak najmniejszej liczby zasobów wątku głównego, aby tworzyć płynniejsze animacje.
- Nowoczesna estetyka: ulepszone przejścia zapewniają dopracowany i atrakcyjny interfejs.
Ten post jest częścią serii o tym, jak firmy z branży e-commerce ulepszyły swoje witryny za pomocą nowych funkcji CSS i interfejsu. Z tego artykułu dowiesz się, jak niektóre firmy wdrożyły interfejs View zakupu API i skorzystały z niego.
redBus
Firma redBus zawsze starała się osiągnąć jak najniższy poziom spójności między środowiskiem natywnym a stroną internetową. Przed wprowadzeniem interfejsu View Migrate API wdrożenie tych animacji w naszych zasobach internetowych było trudne. Okazało się jednak, że za pomocą interfejsu API można intuicyjnie przełączać się między różnymi ścieżkami użytkownika, aby korzystanie z internetu przypominało aplikację. Wszystko to w połączeniu z poprawą wydajności sprawia, że jest to funkcja obowiązkowa na wszystkich stronach internetowych – Amit Kumar, starszy kierownik ds. inżynierii, redBus.
Zespół zaimplementował przejścia między widokami w wielu miejscach. Oto przykład połączenia animacji rozjaśniania i przesuwania po ikonie logowania na stronie głównej.
Kod
Ta implementacja wykorzystuje wieleview-transition-namei niestandardowych animacji
(scale-downi scale-up). Zastosowanie view-transition-name z unikalną wartością oddziela element logowania od reszty strony, aby animować go osobno. Utworzenie nowego, niepowtarzalnego elementu view-transition-name powoduje też utworzenie nowego elementu ::view-transition-group w pseudoelementowym drzewie (widocznym w kodzie poniżej), dzięki czemu można nim manipulować 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
Zespół wykorzystał przejścia między widokami, aby dodać zanikającą animację, gdy użytkownik przełącza się między miniaturami produktów.
Implementacja jest bardzo prosta – korzystając z narzędzia
startViewTransition, od razu uzyskujemy przyjemniejsze przejście zaciemniania w porównaniu z poprzednią implementacją, bez żadnych efektów – Andy Wihalim, starszy inżynier oprogramowania, Tokopedia.
Przed
Po
Kod
Ten kod korzysta z platformy React i zawiera kod związany z konkretną tą platformą, np. flushSync.Dowiedz się więcej o korzystaniu z platform do implementacji przejścia między widokami.
Jest to podstawowa implementacja, która sprawdza, czy przeglądarka obsługuje startViewTransition i przeprowadza przejście. W przeciwnym razie wraca do działania domyślnego.
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
W swojej branży inwestycyjnej firma Policybazaar wykorzystała interfejs View Migrate API do pomocy w elementach pomocy takich jak „dlaczego warto kupić”, co sprawiło, że stały się one atrakcyjne wizualnie i były wygodniejsze w korzystaniu z takich funkcji.
Dzięki efektom przejścia widoku udało nam się wyeliminować powtarzalny kod CSS i JavaScript odpowiedzialny za zarządzanie animacjami w różnych stanach. To zaoszczędziło wysiłek w programowaniu i znacznie poprawiło wygodę użytkowników – Aman Soni, kierownik ds. technicznych w Policybazaar.
Kod
Poniższy kod jest podobny do poprzednich przykładów. Warto zwrócić uwagę, że można zastępować domyślne style i animacje ::view-transition-old(root)oraz::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 wziąć pod uwagę podczas korzystania z interfejsu View Przenoszenie API
Jeśli używasz wielu efektów przejścia między widokami na tej samej stronie, upewnij się, że każdy efekt lub sekcja ma inną nazwę przejścia między widokami, aby zapobiec konfliktom.
Aktywne (przechodzenie) przejście między widokiem powoduje dodanie nowej warstwy do pozostałej części interfejsu. Unikaj więc wywoływania przejścia po najechaniu kursorem, ponieważ zdarzenie mouseLeave jest wywoływane nieoczekiwanie (gdy kursor wciąż się nie porusza).
Zasoby
- Płynne i proste przejścia dzięki interfejsowi View Transfer API
- Wyjaśnienie: przejść z widoku przejść dla MPA
- Studium przypadku: bezproblemowa nawigacja dzięki przejściom z widoku
- Studium przypadku: co potrafi internet? | Nawigacja jak w aplikacji
- Integracje: udostępnij przejścia między widokami w różnych przeglądarkach
- Chcesz zgłosić błąd czy poprosić o dodanie nowej funkcji? Chcemy poznać Twoją opinię na temat SPA i MPA.
Zapoznaj się z pozostałymi artykułami z tej serii, które opowiadają o tym, jak firmy e-commerce odniosły korzyści dzięki wykorzystaniu nowych funkcji CSS i interfejsu, takich jak animacje oparte na przewijaniu, wyskakujące okienko, zapytania dotyczące kontenera i selektor has().