Fallstudien zu Umstellungen ansehen

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Ansichtsübergänge sind animierte und nahtlose Übergänge zwischen verschiedenen Zuständen einer Webseite oder Anwendung. Mit der View Transition API können Sie diese Effekte einfacher und leistungsfähiger als bisher erstellen. Die API bietet gegenüber früheren JavaScript-Ansätzen mehrere Vorteile:

  • Verbesserte Nutzererfahrung:Reibungslose Übergänge und visuelle Hinweise führen Nutzer durch Änderungen auf der Benutzeroberfläche, sodass die Navigation natürlich und weniger aufdringlich wirkt.
  • Visuelle Kontinuität: Wenn ein Gefühl der Kontinuität zwischen Ansichten gewahrt wird, reduziert sich die kognitive Last und hilft Nutzern, sich an der Anwendung zu orientieren.
  • Leistung:Die API versucht, so wenige Hauptthreadressourcen wie möglich zu verwenden, um reibungslosere Animationen zu erzeugen.
  • Moderne Ästhetik: Die verbesserten Übergänge tragen zu einer ausgefeilten und ansprechenden Nutzererfahrung bei.

Unterstützte Browser

  • 111
  • 111
  • x
  • 18

Quelle

Dieser Beitrag ist Teil einer Reihe, in der erläutert wird, 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 die Implementierung dieser Animationen in unseren Web-Assets schwierig. Mit der API ist es für uns jedoch intuitiv, Übergänge über mehrere Nutzerpfade hinweg zu erstellen, um das Web App-ähnlicher zu gestalten. All dies und die damit verbundenen Vorteile machen es zu einem Muss für alle Websites – Amit Kumar, Senior Engineering Manager, redBus.

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

Übergänge ein- und einblenden, wenn der Nutzer auf der redBus-Startseite auf das Anmeldesymbol klickt.

Code

Bei dieser Implementierung werden mehrere view-transition-name- und benutzerdefinierte Animationen (scale-down und scale-up) verwendet. Wenn Sie view-transition-name mit einem eindeutigen Wert verwenden, 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 verwendete Ansichtsübergänge, um eine Ausblendungsanimation hinzuzufügen, wenn der Nutzer zwischen Produkt-Thumbnails wechselt.

Die Implementierung ist so einfach, dass der Fading-Übergang mit startViewTransition im Vergleich zur vorherigen Implementierung ohne Auswirkungen sofort angenehmer ist (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 einfache Implementierung, die prüft, ob der Browser startViewTransition unterstützt. Wenn ja, wird der Übergang durchgeführt. Andernfalls wird auf das Standardverhalten zurückgesetzt.

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})} />

Richtlinienbasar

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. Dies hat den Entwicklungsaufwand gespart und die Nutzererfahrung erheblich verbessert. Aman Sooni, Tech Lead, Policybazaar.

Sehen Sie sich eine Animation mit Übergängen auf dem CTA „Gründe für den Kauf von PolicyBazaar“ auf einer Investitionsseite an.

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

Bei der Verwendung der View Transition API zu beachtende Punkte

Wenn Sie mehrere Effekte für den Ansichtsübergang auf derselben Seite verwenden, müssen Sie für jeden Effekt bzw. Abschnitt einen anderen Namen für den Ansichtsübergang haben, um Konflikte zu vermeiden.

Während ein Ansichtsübergang aktiv ist (d. h. einen Übergang), wird eine neue Ebene über dem Rest der Benutzeroberfläche 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 Cursor noch nicht bewegt.

Weitere Informationen

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.