Fallstudien zu Umstellungen ansehen

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Ansichtsübergänge sind animiert und nahtlose Übergänge zwischen verschiedenen Zuständen. einer Webseite oder einer Anwendung. Die Transition API ansehen wurde entwickelt, um können Sie diese Effekte einfacher und leistungsstärker möglich gewesen. Die API bietet mehrere Vorteile gegenüber vorherigen JavaScript-Ansätze, einschließlich:

  • Verbesserte Nutzererfahrung:Reibungslose Übergänge und visuelle Hinweise leiten die Nutzer weiter. durch Änderungen der Benutzeroberfläche, sodass sich die Navigation natürlich und weniger aufdringlich anfühlt.
  • Visuelle Kontinuität:Das Gefühl der Kontinuität zwischen Ansichten bewahren. reduziert die kognitive Belastung und hilft Nutzern, sich an der Anwendung zu orientieren.
  • Leistung:Die API versucht, so wenige Ressourcen des Hauptthreads wie möglich zu verwenden. was flüssigere Animationen erzeugt.
  • Moderne Ästhetik: Die verbesserten Übergänge tragen zu einer eine ansprechende Nutzererfahrung bieten.

Unterstützte Browser

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: nicht unterstützt <ph type="x-smartling-placeholder">
  • Safari: 18. <ph type="x-smartling-placeholder">

Quelle

Dieser Beitrag ist Teil einer Reihe besprechen, wie E-Commerce-Unternehmen die Website mit neuen CSS- und UI-Funktionen optimiert haben. In diesem Artikel erfahren Sie, wie einige Unternehmen die View Transition API implementiert und davon profitierten.

redBus

redBus hat schon immer versucht, die Gleichheit zwischen nativen Anzeigen und User Experiences wie möglich machen. Vor der View Transition API wurden diese dass Animationen in unseren Web-Assets herausfordernd waren. Aber mit der API haben wir es gefunden, Intuitive Übergänge zwischen mehreren User Journeys erstellen, um das Web zu optimieren App-ähnlichen Nutzererfahrung. All dies und die Leistungsvorteile machen es zu einem muss für alle Websites über eine Funktion verfügen – Amit Kumar, Senior Engineering Manager, redBus.

Das Team hat an mehreren Stellen Übergänge bei Ansichten implementiert. Hier ein Beispiel: einer Kombination aus Ein- und Einblendungsanimation auf dem Anmeldesymbol auf der Startseite. Seite.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Übergänge einblenden und einblenden, wenn der Nutzer auf die Anmeldung klickt auf der redBus-Startseite.

Code

Diese Implementierung verwendet mehrereview-transition-nameund benutzerdefinierte Animationen (scale-down und scale-up) view-transition-name mit einem eindeutigen Wert verwenden trennt die Anmeldekomponente vom Rest der Seite, um sie zu animieren separat. Wenn Sie eine neue eindeutige view-transition-name erstellen, wird auch ein neues ::view-transition-group in der Pseudo-Elementstruktur (wie unten gezeigt) Code), sodass er unabhängig vom Standardcode bearbeitet werden kann. ::view-transition-group(root)

::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 zu einem anderen Nutzer wechselte. zwischen Produkt-Thumbnails.

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

Vorher

Nachher

Code

Der folgende Code verwendet ein React-Framework und enthält Framework-spezifischen Code. flushSync.Weitere Informationen zum Umsetzen der Ansicht mit Frameworks Übergänge. Hierbei handelt es sich um eine grundlegende Implementierung, die prüft, ob der Browser startViewTransition. Wenn ja, erfolgt der Übergang. Andernfalls wird die auf das Standardverhalten eingestellt.

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

PolicyBazaar investition hat der Branche die View Transition API für Hilfetippelemente wie und die Nutzung dieser Funktionen verbessern.

Durch die Integration von View Transitions haben wir wiederholte CSS- und JavaScript-Elemente abgeschafft. Code, der für die Verwaltung von Animationen in verschiedenen Zuständen verantwortlich ist. Dies speicherte und die Nutzererfahrung erheblich verbessert. – Aman Soni, Tech Lead, Policybazaar

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Sehen Sie sich die Animation zu den Übergängen unter „Gründe für den Kauf von PolicyBazaar“ an. CTA auf einer Seite mit Anlageinformationen.

Code

Der folgende Code ähnelt den vorherigen Beispielen. Sie sollten jedoch beachten, Standardformate und -animationen von ::view-transition-old(root)und::view-transition-new(root). 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 Übergang von Ansichten auf derselben Seite verwenden, einen anderen Ansichtsübergangsnamen für jeden Effekt oder Abschnitt haben, Konflikten.

Solange ein Ansichtsübergang aktiv ist (d. h. einen Übergang), wird auf der Seite über den Rest der Benutzeroberfläche. Der Übergang sollte also nicht ausgelöst werden, wenn der Mauszeiger darauf bewegt wird. Das mouseLeave-Ereignis wird unerwartet ausgelöst (wenn der tatsächliche Cursor bewegt sich immer noch nicht).

Ressourcen

Lesen Sie die anderen Artikel dieser Reihe, in denen es um E-Commerce geht. Unternehmen profitierten von neuen CSS- und UI-Funktionen wie Scroll-orientierte Animationen, Pop-over, Containerabfragen und der has()-Selektor.