Zobacz studia przypadków dotyczące przenoszenia kont

Swetha Gopalakrishnan

Saurabh Rajpal

Przejścia widoku są animowane i płynne między różnymi stanami strony internetowej lub interfejsu aplikacji. Wyświetl interfejs Migrate API zaprojektowano tak, pozwalają tworzyć te efekty w prostszy i wydajniejszy sposób niż co było wcześniej możliwe. Interfejs API ma wiele zalet w porównaniu z poprzednimi rozwiązaniami Metody JavaScript, w tym:

• Większa wygoda użytkowników: płynne przejścia i wskazówki wizualne pomagają użytkownikom. dzięki zmianom interfejsu, dzięki czemu nawigacja wydaje się naturalna i bardziej irytująca.
• Spójność wizualna: zachowywanie poczucia ciągłości między widokami zmniejsza obciążenie poznawcze i pomaga użytkownikom skupić się w aplikacji.
• Wydajność: interfejs API próbuje używać jak najmniejszej liczby zasobów wątku głównego, co pozwala tworzyć płynniejsze animacje.
• Nowoczesna estetyka: ulepszone przejścia zapewniają dopracowany i zaangażowaniu użytkowników.

Ten post które są częścią serii, o tym, jak firmy z branży e-commerce ulepszyła swoją witrynę za pomocą nowych funkcji CSS i interfejsu użytkownika. W tym artykule dowiesz się, jak niektóre firmy wdrożyły interfejs View Migrate API i z niego skorzystały.

redBus

Firma redBus zawsze dążyła do osiągnięcia jak największej spójności między swoimi rozwiązaniami natywnymi a internetowymi i zapewniać użytkownikom jak najlepsze wrażenia. Przed wdrożeniem interfejsu View Migrate API wdrożenie tych animacje w zasobach internetowych było trudnym zadaniem. Dzięki interfejsowi API udało nam się które pozwalają użytkownikom intuicyjnie przełączać się między różnymi ścieżkami bardziej przypominają aplikacje. Wszystko to w połączeniu z zaletami sprawia, że musi mieć funkcję dla wszystkich witryn. – Amit Kumar, starszy specjalista ds. inżynierii Menedżer, 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 stronę.

Kod

Ta implementacja wykorzystuje wieleview-transition-namei niestandardowych animacji (scale-down i scale-up). Używanie parametru view-transition-name z unikalną wartością oddziela komponent logowania od reszty strony, aby był animowany oddzielnie. Utworzenie nowego unikalnego pola view-transition-name powoduje też utworzenie nowego ::view-transition-groupw drzewie pseudoelementu (widocznego w następujący sposób kodu), dzięki czemu można nią manipulować 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ół wykorzystał przejścia widoku, aby dodać animację zanikającą po przełączeniu się użytkownika. między miniaturami produktów.

Implementacja jest bardzo prosta, dzięki startViewTransition uzyskać przyjemniejsze rozjaśnianie w porównaniu z poprzednią implementacją. bez żadnych efektów—Andy Wihalim, Senior Software Inżynier, Tokopedia.

Przed

Po

Kod

Ten kod korzysta z platformy React i zawiera kod związany z tą platformą: np. flushSync.Dowiedz się więcej o korzystaniu ze platform w celu wdrożenia widoku przejścia dalej. To podstawowa implementacja, która sprawdza, czy przeglądarka obsługuje startViewTransition, a jeśli tak, to jest to przejście. W przeciwnym razie wraca do domyślnego zachowania.

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

Policybazaar inwestycja korzysta z interfejsu View Przenoszenie API w przypadku elementów pomocy, takich jak „dlaczego zakup”, sprawiając, że są one atrakcyjne wizualnie i lepiej wykorzystywać takie funkcje.

Dzięki efektom przejścia widoku udało się wyeliminować powtarzający się CSS i JavaScript odpowiedzialnym za zarządzanie animacjami w różnych stanach. To zostało zapisane pracy programistycznej i znacznie poprawiło wrażenia użytkownika. – Aman Soni, kierownik ds. technicznych, Policybazaar

Kod

Poniższy kod jest podobny do poprzednich przykładów. Warto zwrócić uwagę, możliwość zastępowania domyślnych stylów i animacji ::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 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 mają dla każdego efektu lub sekcji inną nazwę przejścia między widokami, konflikty.

Aktywne (przechodzenie) przejście widoku spowoduje dodanie nowej warstwy u góry pozostałej części interfejsu. Unikaj wywoływania przejścia po najechaniu kursorem, ponieważ zdarzenie mouseLeave zostanie nieoczekiwanie wywołane (gdy najedzie jeszcze się nie rusza).

Zasoby

• Płynne i proste przejścia dzięki interfejsowi View Migrate 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.

Przeczytaj inne artykuły z tej serii na temat tego, jak e-commerce firm, które skorzystały z nowych funkcji CSS i UI, takich jak przewijanie animacje, wyskakujące okienko, zapytania dotyczące kontenera oraz selektor has().

• Dlaczego funkcje interfejsu internetowego są ważne w przypadku witryny e-commerce?
• Animacje oparte na przewijaniu – studia przypadków
• Studia przypadków dotyczące interfejsu Popover API
• Zapytania dotyczące kontenerów – studia przypadków
• :has() – studia przypadków