Ta strona została przetłumaczona przez Cloud Translation API.

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.
Spójność wizualna: zachowanie ciągłości między widokami zmniejsza obciążenie poznawcze i pomaga użytkownikom zachować orientację w aplikacji.
Wydajność: interfejs API stara się używać jak najmniej zasobów głównego wątku, co zapewnia płynniejsze animacje.
Nowoczesny wygląd: ulepszone przejścia zapewniają wygodę i zaangażowanie użytkowników.

Obsługa przeglądarek

Źródło

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 ViewTransition 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żynieryjnych, 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.

Przejścia typu fade i slide w przypadku widoku, gdy użytkownik kliknie ikonę logowania na stronie głównej redBus.

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, unikalnego view-transition-name powoduje również utworzenie nowego ::view-transition-group w drzewie pseudoelementów (jak widać w poniższym kodzie), co umożliwia manipulowanie nim niezależnie od domyślnego ::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 łatwa. Za pomocą startViewTransition od razu uzyskasz przyjemniejsze przejście z blaknięciem niż w poprzedniej implementacji bez żadnych efektów.Andy Wihalim, starszy inżynier oprogramowania, Tokopedia.

Przed

Po

Kod

Ten kod używa frameworka React i zawiera kod specyficzny dla tego frameworka, na przykład flushSync.Więcej informacji o używaniu frameworków do implementowania przejść 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 zastosuje się 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

Firma Policybazaar w ramach inwestycji w branży użyła interfejsu View Transition API do elementów wskazówek, takich jak „Dlaczego warto kupić”, aby były one atrakcyjne wizualnie i ułatwiały korzystanie z tych funkcji.

Dzięki zastosowaniu przejść między widokami udało nam się wyeliminować powtarzający się kod CSS i JavaScriptu 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 komfort użytkowników.—Aman Soni, Tech Lead, Policybazaar.

Obejrzyj animację przejść na przycisku wezwania do działania „Dlaczego warto kupować w usłudze Policybazaar” na stronie z informacjami o inwestycji.

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.

Podczas aktywnego przejścia między widokami (przejście) nowa warstwa zostanie dodana do reszty 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
Czy chcesz zgłosić błąd lub poprosić o dodanie 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().