Diese Seite wurde von der Cloud Translation API übersetzt.

Fallstudien zu Umstellungen ansehen

Swetha Gopalakrishnan

Saurabh Rajpal

Ansichtsübergänge sind animierte und nahtlose Übergänge zwischen verschiedenen Zuständen einer Webseite oder Anwendung. Mit der View Transition API lassen sich diese Effekte jetzt einfacher und effizienter erstellen als zuvor. Die API bietet gegenüber früheren JavaScript-Ansätzen mehrere Vorteile, darunter:

Verbesserte Nutzerfreundlichkeit: Reibungslose Übergänge und visuelle Hinweise führen Nutzer durch Änderungen an der Benutzeroberfläche, sodass die Navigation natürlich und weniger abrupt wirkt.
Visuelle Kontinuität: Wenn Sie für Kontinuität zwischen den Ansichten sorgen, wird die kognitive Belastung reduziert und Nutzer können sich leichter in der Anwendung zurechtfinden.
Leistung:Die API versucht, so wenige Ressourcen des Hauptthreads wie möglich zu verwenden, was zu flüssigeren Animationen führt.
Moderne Ästhetik: Die verbesserten Übergänge sorgen für eine ausgefeilte und ansprechende Nutzererfahrung.

Unterstützte Browser

Quelle

Dieser Beitrag gehört zu einer Reihe, in der wir zeigen, wie E-Commerce-Unternehmen ihre Website mit neuen CSS- und UI-Funktionen optimiert haben. In diesem Artikel erfahren Sie, wie einige Unternehmen die View Transition API implementiert und davon profitieren.

redBus

redBus hat schon immer versucht, die Nutzerfreundlichkeit der nativen Website und der Website möglichst gleichwertig zu gestalten. Vor der View Transition API war es schwierig, diese Animationen in unseren Web-Assets zu implementieren. Mit der API können wir jedoch ganz einfach Übergänge über mehrere Nutzerpfade hinweg erstellen, um die Nutzung des Webs nutzerfreundlicher zu gestalten. All das in Kombination mit den Leistungsvorteilen macht es zu einer unverzichtbaren Funktion für alle Websites.Amit Kumar, Senior Engineering Manager, redBus

Das Team hat Ansichtsübergänge an mehreren Stellen implementiert. Hier ist ein Beispiel für eine Kombination aus Ein- und Einblendungsanimation auf dem Anmeldesymbol auf der Startseite.

Überblendungen und Einblendungen, wenn der Nutzer auf der Startseite von redBus auf das Anmeldesymbol klickt.

Code

Bei dieser Implementierung werden mehrere view-transition-name- und benutzerdefinierte Animationen (scale-down und scale-up) verwendet. Durch die Verwendung von view-transition-name mit einem eindeutigen Wert wird die Anmeldekomponente vom Rest der Seite getrennt, um sie separat zu animieren. Wenn Sie eine neue eindeutige view-transition-name erstellen, wird auch ein neues ::view-transition-group im Pseudoelementbaum erstellt (siehe folgenden Code), sodass er getrennt vom Standard-::view-transition-group(root) bearbeitet werden kann.

::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

Das Team hat Ansichtsübergänge verwendet, um eine Ausblendungsanimation hinzuzufügen, wenn der Nutzer zwischen Produkt-Thumbnails wechselt.

Die Implementierung ist so einfach, dass wir mit startViewTransition sofort einen angenehmeren Übergang erhalten, ohne dass es zu Effekten kommt, die wir bei der vorherigen Implementierung hatten.Andy Wihalim, Senior Software Engineer, Tokopedia

Vorher

Nachher

Code

Der folgende Code verwendet ein React-Framework und enthält Framework-spezifischen Code wie flushSync.. Weitere Informationen finden Sie unter Mit Frameworks arbeiten, um Ansichtsübergänge zu implementieren. Dies ist eine grundlegende Implementierung, bei der geprüft wird, ob der Browser startViewTransition unterstützt. Ist das der Fall, wird die Umstellung durchgeführt. Andernfalls wird das Standardverhalten verwendet.

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

In der Investitionsbranche von Policybazaar wurde die View Transition API für Hilfetippelemente wie „Warum sollte ich etwas kaufen“ verwendet, um sie visuell ansprechend zu gestalten und die Nutzung dieser Funktionen zu verbessern.

Durch die Integration von Wiedergabeübergängen haben wir sich wiederholenden CSS- und JavaScript-Code entfernt, der für die Verwaltung von Animationen in verschiedenen Zuständen verantwortlich ist. Das sparte Entwicklungsaufwand und verbesserte die Nutzerfreundlichkeit erheblich.—Aman Soni, Tech Lead, Policybazaar

Übergangsanimation für den CTA „Warum bei Policybazaar kaufen?“ auf einer Seite mit Investmenteinträgen ansehen.

Code

Der folgende Code ähnelt den vorherigen Beispielen. Zu beachten ist, dass die Standardformate und -animationen von ::view-transition-old(root) und ::view-transition-new(root) überschrieben werden können. In diesem Fall wurde der Standardwert für animation-duration auf 0,4 Sekunden aktualisiert.

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;
}

Hinweise zur Verwendung der View Transition API

Wenn Sie auf einer Seite mehrere Ansichtsübergangseffekte verwenden, müssen Sie für jeden Effekt oder Bereich einen anderen Namen für den Ansichtsübergang angeben, um Konflikte zu vermeiden.

Wenn ein Ansichtsübergang aktiv ist, wird dem Rest der Benutzeroberfläche eine neue Ebene hinzugefügt. Der Übergang sollte daher nicht ausgelöst werden, wenn der Mauszeiger darauf bewegt wird. Das mouseLeave-Ereignis wird dann unerwartet ausgelöst, wenn sich der tatsächliche Cursor noch nicht bewegt.

Ressourcen

Reibungslose und einfache Umstellungen mit der View Transition API
Erläuterung: Ansichtsübergänge für MPA
Fallstudie: Nahtlose Navigation mit Ansichtsübergängen
Fallstudie: Was im Web so alles möglich ist | App-ähnliche Navigation bieten
Interoperabilitätsvorschlag: Ansichtsübergänge plattformübergreifend verfügbar machen
Möchten Sie einen Fehler melden oder eine neue Funktion anfordern? Wir würden uns über Ihre Rückmeldung zu SPA und MPA freuen.

In den anderen Artikeln dieser Reihe erfahren Sie, wie E-Commerce-Unternehmen von neuen CSS- und UI-Funktionen wie Scroll-gesteuerten Animationen, Popover, Containerabfragen und dem has()-Selektor profitiert haben.