Fallstudien zu Umstellungen ansehen

Swetha Gopalakrishnan

Saurabh Rajpal

Ansichtsübergänge sind animierte und nahtlose Übergänge zwischen verschiedenen Status der Benutzeroberfläche einer Webseite oder Anwendung. Die View Transition API wurde entwickelt, um diese Effekte einfacher und leistungsfähiger als bisher zu erstellen. Die API bietet gegenüber früheren JavaScript-Ansätzen mehrere Vorteile:

• Verbesserte Nutzerfreundlichkeit:Reibungslose Übergänge und visuelle Hinweise führen Nutzer durch Änderungen an der Benutzeroberfläche. Die Navigation fühlt sich dadurch natürlich an und ist weniger störend.
• Visuelle Kontinuität:Wenn Sie für Kontinuität zwischen Ansichten sorgen, wird die kognitive Belastung reduziert und Nutzer können sich in der Anwendung besser orientieren.
• Leistung:Die API versucht, so wenige Ressourcen des Hauptthreads wie möglich zu verwenden, was zu flüssigeren Animationen führt.
• Modernes Design:Die verbesserten Übergänge tragen zu einer ansprechenden und modernen User Experience bei.

Dieser Beitrag ist Teil einer Reihe, in der beschrieben wird, wie E-Commerce-Unternehmen ihre Websites mit neuen CSS- und UI-Funktionen optimiert haben. In diesem Artikel erfahren Sie, wie einige Unternehmen die View Transition API implementiert haben und davon profitiert haben.

redBus

redBus hat immer versucht, die Funktionen der nativen App und der Webversion so weit wie möglich anzugleichen. Vor der View Transition API war die Implementierung dieser Animationen in unseren Web-Assets schwierig. Mit der API konnten wir jedoch intuitiv Übergänge zwischen mehreren User Journeys erstellen, um die Webnutzung app-ähnlicher zu gestalten. All das in Kombination mit den Leistungsvorteilen macht es zu einem Muss für alle Websites.“ – Amit Kumar, Senior Engineering Manager, redBus.

Das Team hat View Transitions an mehreren Stellen implementiert. Hier sehen Sie ein Beispiel für eine Kombination aus Einblenden und Einblenden mit Bewegung für das Anmeldesymbol auf der Startseite.

Code

Bei dieser Implementierung werden mehrereview-transition-nameund benutzerdefinierte Animationen (scale-downund scale-up) verwendet. Durch die Verwendung von view-transition-namemit einem eindeutigen Wert wird die Anmeldekomponente vom Rest der Seite getrennt, damit sie separat animiert werden kann. Wenn Sie ein neues, eindeutiges view-transition-name erstellen, wird auch ein neues ::view-transition-group im Pseudo-Elementbaum erstellt (siehe Code unten). Dadurch kann es unabhängig vom Standard-::view-transition-group(root) bearbeitet werden.

::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 Einblendanimation hinzuzufügen, wenn der Nutzer zwischen Produkt-Thumbnails wechselt.

Die Implementierung ist so einfach. Mit startViewTransition erhalten wir sofort einen angenehmeren Übergang als bei der vorherigen Implementierung ohne Effekte. – Andy Wihalim, Senior Software Engineer, Tokopedia

Vorher

Nach

Code

Im folgenden Code wird ein React-Framework verwendet und frameworkspezifischer Code wie flushSync. ist enthalten. Weitere Informationen zum Implementieren von Ansichtsübergängen mit Frameworks Dies ist eine einfache Implementierung, die prüft, ob der Browser startViewTransition unterstützt, und die Übergänge dann ausfü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

Policybazaar hat die View Transition API in der Investment-Branche für Infofeld-Elemente wie „Warum kaufen“ verwendet. Dadurch sind sie optisch ansprechender und die Nutzung solcher Funktionen wird verbessert.

Durch die Einbindung von View Transitions konnten wir sich wiederholenden CSS- und JavaScript-Code eliminieren, der für die Verwaltung von Animationen in verschiedenen Status verantwortlich ist. Das hat den Entwicklungsaufwand reduziert und die Nutzerfreundlichkeit deutlich verbessert.“—Aman Soni, Tech Lead, Policybazaar

Code

Der folgende Code ähnelt den vorherigen Beispielen. Sie können die Standardstile und ‑animationen von ::view-transition-old(root) und ::view-transition-new(root) überschreiben. In diesem Fall wurde der Standardwert 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;
}

Überlegungen bei der Verwendung der View Transition API

Wenn Sie mehrere Ansichtsübergangseffekte auf derselben Seite verwenden, müssen Sie darauf achten, dass jeder Effekt oder Abschnitt einen anderen „view-transition-name“ hat, um Konflikte zu vermeiden.

Während ein Ansichtsübergang aktiv ist, wird eine neue Ebene über der restlichen Benutzeroberfläche hinzugefügt. Vermeiden Sie es daher, den Übergang beim Hovern auszulösen, da das mouseLeave-Ereignis unerwartet ausgelöst wird (wenn sich der tatsächliche Cursor noch nicht bewegt).

Ressourcen

• Reibungslose und einfache Übergänge mit der View Transition API
• Erklärung: View-Übergänge für MPA
• Fallstudie: Nahtlose Navigation mit View Transitions
• Fallstudie: Was im Web so alles möglich ist | App-ähnliche Navigationen bereitstellen
• Interop-Vorschlag: View Transitions in allen Browsern verfügbar machen
• Möchten Sie einen Fehler melden oder eine neue Funktion vorschlagen? Wir möchten von Ihnen zu SPA und MPA hören.

In den anderen Artikeln dieser Reihe erfahren Sie, wie E-Commerce-Unternehmen von der Verwendung neuer CSS- und UI-Funktionen wie scrollgesteuerte Animationen, Pop-over, Containerabfragen und dem Selektor has() profitiert haben.

• Warum sind Web-UI-Funktionen für Ihre E-Commerce-Website wichtig?
• Fallstudien zu scrollgesteuerten Animationen
• Fallstudien zur Popover API
• Fallstudien zu Container Queries
• Anwendungsbeispiele für den Selektor:has()