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 der Benutzeroberfläche einer Webseite oder Anwendung. Mit der View Transitions API können Sie diese Effekte einfacher und effizienter als bisher erstellen. Die API bietet im Vergleich zu früheren JavaScript-Ansätzen mehrere Vorteile:

  • Verbesserte Nutzerfreundlichkeit:Weiche Übergänge und visuelle Hinweise führen Nutzer durch Änderungen an der Benutzeroberfläche. So wirkt die Navigation natürlich und ist weniger verwirrend.
  • Visuelle Kontinuität: Das Beibehalten eines Gefühls der Kontinuität zwischen Ansichten reduziert die kognitive Belastung und hilft den Nutzern, innerhalb der Anwendung den Überblick zu behalten.
  • Leistung:Die API versucht, so wenige Hauptthread-Ressourcen wie möglich zu verwenden, um flüssigere Animationen zu erzeugen.
  • Moderne Ästhetik:Die verbesserten Übergänge tragen zu einer ausgefeilten und ansprechenden Nutzererfahrung bei.

Unterstützte Browser

  • 111
  • 111
  • x
  • x

Quelle

Dieser Beitrag ist Teil einer Reihe, in der erläutert wird, wie E-Commerce-Unternehmen ihre Website mithilfe neuer CSS- und UI-Funktionen optimieren. In diesem Artikel erfahren Sie, wie einige Unternehmen die View Transitions API implementiert und von ihr profitiert haben.

redBus

redBus hat schon immer versucht, eine möglichst Äquivalenz zwischen nativen und Web-Erlebnissen zu schaffen. Vor der View Transitions API war die Implementierung dieser Animationen in Web-Assets eine Herausforderung. Mit der API ist es jedoch intuitiv, Übergänge über mehrere Nutzerpfade hinweg zu erstellen, um eine App-ähnliche User Experience zu schaffen. All dies zusammen mit den Leistungsvorteilen macht es zu einem unverzichtbaren Feature für alle Websites – Amit Kumar, Senior Engineering Manager bei redBus.

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

Die Ein-/Aus-Schaltfläche wird eingeblendet, wenn der Nutzer auf der redBus-Startseite auf das Anmeldesymbol klickt.

Code

Diese Implementierung verwendet mehrere view-transition-nameund benutzerdefinierte Animationen (scale-down und scale-up). Wenn du view-transition-name mit einem eindeutigen Wert verwendest, 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 neuer ::view-transition-group im Pseudoelementbaum (wie im folgenden Code gezeigt) erstellt, sodass er getrennt vom standardmäßigen ::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

Mithilfe von Ansichtsübergängen fügte das Team eine Animation hinzu, die ausgeblendet wird, wenn der Nutzer zwischen Produkt-Miniaturansichten wechselt.

Die Implementierung ist so einfach, dass wir mit startViewTransition sofort einen angenehmeren Verblass im Vergleich zur vorherigen Implementierung ohne Auswirkungen – Andy Wihalim, Senior Software Engineer bei Tokopedia – erzielen.

Vorher

Nachher

Code

Im folgenden Code wird ein React-Framework verwendet, das Framework-spezifischen Code enthält, z. B. flushSync.. Weitere Informationen zum Implementieren von Ansichtsübergängen mit Frameworks Dies ist eine einfache Implementierung, bei der geprüft wird, ob der Browser startViewTransition unterstützt. Falls ja, wird die Umstellung durchgeführt. Andernfalls wird 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})} />

PolicyBazaar

Für die Investitionsbranche von PolicyBazaar wurde die View Transitions API für Elemente mit Tipps wie „Warum kaufen“ verwendet. So sind sie optisch ansprechend und die Nutzung dieser Funktionen wird verbessert.

Durch die Integration von View-Übergängen haben wir CSS- und JavaScript-Code, der für die Verwaltung von Animationen in verschiedenen Stadien verantwortlich ist, überflüssig. Das spart Entwicklungsaufwand und verbessert die Nutzerfreundlichkeit erheblich. – Aman Soni, Tech Lead, Policybazaar

Sehen Sie sich die Übergangsanimation für den CTA „Gute Gründe für einen Kauf bei Policybazaar“ auf einer Seite mit Investitionseinträgen an.

Code

Der folgende Code ähnelt den vorherigen Beispielen. Dabei ist es wichtig, die Standardstile und -animationen von ::view-transition-old(root) und ::view-transition-new(root) zu überschreiben. In diesem Fall wurde der Standardwert von 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;
}

Wichtige Punkte bei der Verwendung der View Transitions API

Wenn Sie mehrere Effekte für Ansichtsübergänge auf derselben Seite verwenden, achten Sie darauf, dass Sie für jeden Effekt oder Abschnitt einen anderen Namen für den Ansichtsübergang verwenden, um Konflikte zu vermeiden.

Während ein Ansichtsübergang aktiv ist (mit einem Wechsel), wird über dem Rest der UI eine neue Ebene hinzugefügt. Vermeiden Sie es deshalb, den Übergang auszulösen, wenn der Mauszeiger auf das Objekt bewegt wird. Das mouseLeave-Ereignis wird nämlich unerwartet ausgelöst (wenn sich der Cursor noch nicht bewegt).

Ressourcen

Lesen Sie die anderen Artikel dieser Reihe, in denen beschrieben wird, wie E-Commerce-Unternehmen von der Verwendung neuer CSS- und UI-Funktionen wie Scroll-Animationen, Pop-over-Animationen, Container-Abfragen und dem has()-Selektor profitiert haben.