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 Status der Benutzeroberfläche 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 tragen zu einer ansprechenden und ansprechenden Nutzererfahrung bei.

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 profitiert haben.

redBus

redBus hat immer versucht, die native App und die Webversion so ähnlich wie möglich 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 der Website 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 ein Beispiel für eine Kombination aus Einblend- und Einschwenkanimation für das 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 eine neue ::view-transition-group im Pseudo-Element-Baum erstellt (siehe folgender Code). Sie kann dann unabhängig von der 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 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 frameworkspezifischen Code, z. B. flushSync.Weitere Informationen zur Implementierung von Ansichtsübergängen mithilfe von Frameworks. 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

Die Investment-Branche von Policybazaar hat die View Transition API für Hilfehinweise wie „Warum kaufen?“ verwendet, um sie visuell ansprechender zu gestalten und die Nutzung solcher Funktionen zu verbessern.

Durch die Einbindung von Ansichtsübergängen konnten wir repetitiven CSS- und JavaScript-Code entfernen, der für die Verwaltung von Animationen in verschiedenen Status verantwortlich war. 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. Sie können die Standardstile und ‑animationen von ::view-transition-old(root) und ::view-transition-new(root) überschreiben. 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;
}

Zu beachtende Punkte bei der Verwendung der View Transition API

Wenn Sie auf derselben Seite mehrere Ansichtsübergangseffekte verwenden, müssen Sie für jeden Effekt oder Abschnitt 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. Daher sollten Sie den Übergang nicht beim Hovering auslösen, da das Ereignis mouseLeave dann unerwartet ausgelöst wird, wenn sich der Cursor noch nicht bewegt.

Ressourcen

Reibungslose und einfache Übergänge mit der View Transition API
Erläuterung: Ansichtsübergänge für MPA
Fallstudie: Reibungslose Navigation mit Ansichtsübergängen
Fallstudie: Was im Web so alles möglich ist | App-ähnliche Navigationen bereitstellen
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 Feedback zu SPA und MPA freuen.

In den anderen Artikeln dieser Reihe erfahren Sie, wie E-Commerce-Unternehmen von neuen CSS- und UI-Funktionen wie scrollgesteuerten Animationen, Pop-ups, Containerabfragen und der has()-Auswahl profitiert haben.