Zobacz studia przypadków dotyczące przenoszenia kont

Swetha Gopalakrishnan

Saurabh Rajpal

Przejścia widoku to animowane i płynne przejścia między różnymi stanami interfejsu użytkownika strony internetowej lub aplikacji. View Transition API został zaprojektowany tak, aby umożliwić tworzenie tych efektów w prostszy i wydajniejszy sposób niż dotychczas. Interfejs API ma wiele zalet w porównaniu z dotychczasowymi rozwiązaniami opartymi na JavaScript, m.in.:

• Lepsze wrażenia użytkowników: płynne przejścia i wskazówki wizualne prowadzą użytkowników przez zmiany w interfejsie, dzięki czemu nawigacja jest naturalna i mniej uciążliwa.
• Ciągłość wizualna: zachowanie ciągłości między widokami zmniejsza obciążenie poznawcze i pomaga użytkownikom utrzymać orientację w aplikacji.
• Wydajność: interfejs API stara się używać jak najmniej zasobów wątku głównego, co zapewnia płynniejsze animacje.
• Nowoczesny wygląd: ulepszone przejścia zapewniają dopracowane i angażujące wrażenia użytkownika.

Ten post jest częścią serii, w której omawiamy, jak firmy 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 Transition API i jakie korzyści z tego odniosły.

redBus

redBus zawsze stara się zapewnić jak największą spójność między aplikacją a wersją internetową. Przed wprowadzeniem interfejsu View Transition API implementacja tych animacji w naszych zasobach internetowych była trudna. Dzięki interfejsowi API możemy jednak intuicyjnie tworzyć przejścia między różnymi ścieżkami użytkowników, aby zwiększyć podobieństwo witryny do aplikacji. Wszystko to w połączeniu z korzyściami w zakresie wydajności sprawia, że jest to niezbędna funkcja dla wszystkich witryn. – Amit Kumar, starszy menedżer ds. inżynierii, redBus

Zespół wdrożył przejścia widoku w kilku miejscach. Oto przykład połączenia animacji pojawiania się i wsuwania ikony logowania na stronie głównej.

Kod

Ta implementacja korzysta z wieluview-transition-nameanimacji niestandardowychscale-down(scale-downi scale-up). Użycie view-transition-namez unikalną wartościąview-transition-nameoddziela komponent logowania od reszty strony, aby animować go oddzielnie. Utworzenie nowego unikalnego elementu view-transition-name powoduje też utworzenie nowego elementu ::view-transition-group w drzewie pseudoelementów (pokazanym w poniższym kodzie), co umożliwia manipulowanie 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

Zespół użył przejść widoku, aby dodać animację zanikania, gdy użytkownik przełącza się między miniaturami produktów.

Wdrożenie jest bardzo proste. Dzięki startViewTransition od razu uzyskujemy przyjemniejsze przejście z efektem zanikania w porównaniu z poprzednim wdrożeniem bez żadnych efektów – Andy Wihalim, starszy inżynier oprogramowania, Tokopedia.

Przed

Po

Kod

Ten kod korzysta z frameworka React i zawiera kod specyficzny dla tego frameworka, np. flushSync.Więcej informacji o pracy z frameworkami w celu wdrożenia przejść widoku. Jest to podstawowa implementacja, która sprawdza, czy przeglądarka obsługuje startViewTransition, a jeśli tak, to przeprowadza przejście. W przeciwnym razie wraca do domyślnego działania.

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

Zespół ds. inwestycji w Policybazaar użył interfejsu View Transition API w elementach wskazówek, takich jak „dlaczego warto kupić”, dzięki czemu są one atrakcyjne wizualnie i łatwiejsze w użyciu.

Dzięki włączeniu przejść widoku wyeliminowaliśmy powtarzający się kod CSS i JavaScript, który odpowiadał za zarządzanie animacjami w różnych stanach. Dzięki temu zaoszczędziliśmy czas i wysiłek programistów oraz znacznie zwiększyliśmy wygodę użytkowników. –Aman Soni, kierownik techniczny, Policybazaar

Kod

Poniższy kod jest podobny do poprzednich przykładów. Warto zwrócić uwagę na możliwość zastąpienia domyślnych stylów i animacji elementów ::view-transition-old(root) i ::view-transition-new(root). W tym przypadku domyślna wartość animation-duration została zaktualizowana do 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 należy wziąć pod uwagę podczas korzystania z interfejsu View Transition API

Jeśli używasz na tej samej stronie kilku efektów przejścia widoku, upewnij się, że każdy efekt lub sekcja ma inną nazwę view-transition-name, aby uniknąć konfliktów.

Gdy przejście widoku jest aktywne (w trakcie przejścia), dodaje nową warstwę na wierzchu pozostałej części interfejsu. Dlatego unikaj wywoływania przejścia po najechaniu kursorem, ponieważ zdarzenie mouseLeave zostanie wywołane nieoczekiwanie (gdy kursor w rzeczywistości jeszcze się nie porusza).

Zasoby

• Płynne i proste przejścia dzięki interfejsowi View Transition API
• Wyjaśnienie: przejścia widoku w przypadku MPA
• Studium przypadku: płynna nawigacja dzięki przejściom widoku
• Studium przypadku: The Web Can Do What!? | Zapewnianie nawigacji podobnej do tej w aplikacjach
• Propozycja dotycząca interoperacyjności: udostępnienie przejść widoku w różnych przeglądarkach
• Chcesz zgłosić błąd lub poprosić o nową funkcję? Chętnie poznamy Twoją opinię na temat SPA i MPA.

Zapoznaj się z pozostałymi artykułami z tej serii, aby dowiedzieć się, jak firmy e-commerce korzystają z nowych funkcji CSS i interfejsu, takich jak animacje oparte na przewijaniu, wyskakujące okienka, zapytania o kontenery i selektor has().

• Dlaczego funkcje interfejsu internetowego są ważne w przypadku witryny e-commerce?
• Studia przypadków dotyczące animacji sterowanych przewijaniem
• Przykłady użycia interfejsu Popover API
• Studia przypadków dotyczące zapytań o kontenery
• Studia przypadków dotyczące selektora:has()