Zobacz studia przypadków dotyczące przenoszenia kont

Swetha Gopalakrishnan

Saurabh Rajpal

Przejścia między widokami to animowane i płynne przejścia między różnymi stanami strony internetowej lub interfejsu aplikacji. Interfejs View Transition API został zaprojektowany tak, aby umożliwić tworzenie tych efektów w prostszy i bardziej wydajny sposób niż było to możliwe wcześniej. Interfejs API zapewnia wiele korzyści w porównaniu z wcześniejszymi metodami JavaScriptu, m.in.:

• Większa wygoda użytkowników: płynne przejścia i wizualne wskazówki ułatwiają użytkownikom poruszanie się po zmianach w interfejsie, dzięki czemu nawigacja jest bardziej naturalna i mniej chaotyczna.
• 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 stara się używać jak najmniej zasobów głównego wątku, co zapewnia płynniejsze animacje.
• Nowoczesna estetyka: ulepszone przejścia zapewniają dopracowany i atrakcyjny interfejs.

Ten post należy do serii, w której omawiamy, jak firmy zajmujące się e-commerce ulepszają swoje witryny za pomocą nowych funkcji CSS i interfejsu użytkownika. Z tego artykułu dowiesz się, jak niektóre firmy wdrożyły interfejs View Transition API i jak korzystały z niego.

redBus

redBus zawsze starał się, aby aplikacja natywne i wersja internetowa były jak najbardziej zbliżone do siebie. Przed wprowadzeniem interfejsu View Transition API implementowanie tych animacji w zasobach internetowych było trudne. Jednak dzięki interfejsowi API tworzenie przejść w ramach wielu ścieżek użytkownika jest intuicyjne, co sprawia, że korzystanie z internetu przypomina korzystanie z aplikacji. Wszystko to w połączeniu z zaletami dotyczącymi wydajności sprawia, że jest to funkcja niezbędna dla wszystkich witryn. – Amit Kumar, starszy menedżer ds. inżynierii, redBus.

Zespół wprowadził przejścia między widokami w kilku miejscach. Oto przykład połączenia animacji płynnego przejścia i wsuwania na ikonie logowania na stronie głównej.

Kod

Ta implementacja używa wielu elementów view-transition-name i animacji niestandardowych (scale-down i scale-up). Użycie elementu view-transition-name z wartością unikalną oddziela element logowania od reszty strony, aby można było go animować 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ół użył przejść między widokami, aby dodać animację zanikania, gdy użytkownik przełącza się między miniaturami produktów.

Implementacja jest bardzo prosta. Dzięki użyciu startViewTransition od razu uzyskujemy przyjemniejsze przejście z wygaszaniem niż w poprzedniej implementacji 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 podstawowe wdrożenie, które sprawdza, czy przeglądarka obsługuje startViewTransition. Jeśli tak, przeprowadza przejście. W przeciwnym razie stosowane jest zachowanie 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

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. Zaoszczędziliśmy w ten sposób czas potrzebny na rozwój i znacznie poprawiliśmy wrażenia użytkowników.—Aman Soni, Tech Lead, Policybazaar.

Kod

Poniższy kod jest podobny do poprzednich przykładów. Warto pamiętać, że można zastąpić domyślne style i animacje elementów ::view-transition-old(root) i ::view-transition-new(root). W tym przypadku domyślna wartość parametru 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 należy wziąć pod uwagę podczas korzystania z interfejsu View Transition API

Jeśli na tej samej stronie używasz wielu efektów przejścia między widokami, zadbaj o to, aby każdy z nich miał inną nazwę przejścia widoku. Zapobiegnie to konfliktom.

Aktywne (przechodzenie) przejście widoku spowoduje dodanie nowej warstwy do pozostałej części interfejsu. Unikaj więc aktywowania przejścia po najechaniu kursorem, ponieważ zdarzenie mouseLeave zostanie uruchomione nieoczekiwanie (gdy kursor jeszcze się nie porusza).

Zasoby

• Płynne i proste przejścia dzięki interfejsowi View Transition API
• Wyjaśnienie: przejście na MPA
• Studium przypadku: płynna nawigacja dzięki przejściom między widokami
• Studium przypadku: Co internet może zrobić!? | Realizowanie nawigacji podobnej do aplikacji
• Proponowana interoperacyjność: udostępnienie przejścia między widokami w różnych przeglądarkach
• 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, aby dowiedzieć się, jak firmy e-commerce korzystały z nowych funkcji CSS i interfejsu, takich jak animacje sterowane przewijaniem, wyskakujące okienka, zapytania dotyczące kontenera i selektor has().

• Dlaczego funkcje interfejsu internetowego są ważne w przypadku witryny e-commerce?
• Studia przypadków animacji uruchamianych po przewinięciu strony
• Przykłady wykorzystania interfejsu Popup API
• Studia przypadków dotyczących zapytań dotyczących kontenerów
• :has() – studia przypadków