Visualizza i case study sulle transizioni

Swetha Gopalakrishnan

Saurabh Rajpal

Le transizioni di visualizzazione sono transizioni animate e fluide tra i diversi stati dell'interfaccia utente di una pagina web o di un'applicazione. L'API View Transition è stata progettata per consentirti di creare questi effetti in modo più semplice ed efficiente rispetto a quanto era possibile in precedenza. L'API offre diversi vantaggi rispetto agli approcci JavaScript precedenti, tra cui:

• Esperienza utente migliorata: transizioni fluide e segnali visivi guidano gli utenti attraverso le modifiche all'interfaccia utente, rendendo la navigazione naturale e meno brusca.
• Continuità visiva:mantenere un senso di continuità tra le visualizzazioni riduce il carico cognitivo e aiuta gli utenti a orientarsi all'interno dell'applicazione.
• Prestazioni:l'API tenta di utilizzare il minor numero possibile di risorse del thread principale, il che crea animazioni più fluide.
• Estetica moderna: le transizioni migliorate contribuiscono a un'esperienza utente raffinata e coinvolgente.

Questo post fa parte di una serie che illustra in che modo le aziende di e-commerce hanno migliorato il proprio sito web utilizzando nuove funzionalità CSS e UI. In questo articolo, scopri come alcune aziende hanno implementato e tratto vantaggio dall'API View Transition.

redBus

redBus ha sempre cercato di creare la massima parità possibile tra le esperienze native e web. Prima dell'API View Transition, l'implementazione di queste animazioni nelle nostre risorse web era difficile. Tuttavia, con l'API, abbiamo trovato intuitivo creare transizioni in più percorsi utente per rendere l'esperienza web più simile a quella di un'app. Tutto ciò, unito ai vantaggi in termini di prestazioni, la rende una funzionalità indispensabile per tutti i siti web.—Amit Kumar, Senior Engineering Manager, redBus.

Il team ha implementato le transizioni di visualizzazione in più punti. Ecco un esempio di una combinazione di animazione di dissolvenza in entrata e scorrimento in entrata sull'icona di accesso nella home page.

Codice

Questa implementazione utilizza piùview-transition-namee animazioni personalizzate (scale-downe scale-up). L'utilizzo di view-transition-namecon un valore univoco separa il componente di accesso dal resto della pagina per animarlo separatamente. La creazione di un nuovo view-transition-name univoco crea anche un nuovo ::view-transition-groupnell'albero degli pseudo-elementi (mostrato nel codice seguente), consentendo di manipolarlo separatamente dal ::view-transition-group(root) predefinito.

::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

Il team ha utilizzato le transizioni di visualizzazione per aggiungere un'animazione di dissolvenza quando l'utente passa da una miniatura di prodotto all'altra.

L'implementazione è così semplice che, utilizzando startViewTransition, otteniamo immediatamente una transizione di dissolvenza più piacevole rispetto all'implementazione precedente senza effetti. Andy Wihalim, Senior Software Engineer, Tokopedia.

Prima

Dopo

Codice

Il seguente codice utilizza un framework React e include codice specifico del framework, come flushSync.Scopri di più su come utilizzare i framework per implementare le transizioni delle visualizzazioni. Si tratta di un'implementazione di base che verifica se il browser supporta startViewTransition e, in caso affermativo, esegue la transizione. In caso contrario, viene ripristinato il comportamento predefinito.

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

La sezione investimenti di Policybazaar ha utilizzato l'API View Transition sugli elementi dei suggerimenti, ad esempio "Perché acquistare", rendendoli visivamente accattivanti e migliorando l'utilizzo di queste funzionalità.

Grazie all'incorporamento delle transizioni di visualizzazione, abbiamo eliminato il codice CSS e JavaScript ripetitivo responsabile della gestione delle animazioni in vari stati. Ciò ha consentito di risparmiare sforzi di sviluppo e ha migliorato notevolmente l'esperienza utente.—Aman Soni, Tech Lead, Policybazaar.

Codice

Il seguente codice è simile agli esempi precedenti. Una cosa da notare è la possibilità di ignorare gli stili e le animazioni predefiniti di ::view-transition-old(root) e ::view-transition-new(root). In questo caso, il animation-duration predefinito è stato aggiornato a 0,4 secondi.

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

Aspetti da considerare quando si utilizza l'API View Transition

Quando utilizzi più effetti di transizione della visualizzazione sulla stessa pagina, assicurati di avere un nome view-transition-name diverso per ogni effetto o sezione per evitare conflitti.

Mentre una transizione di visualizzazione è attiva (in transizione), verrà aggiunto un nuovo livello sopra il resto dell'interfaccia utente. Pertanto, evita di attivare la transizione al passaggio del mouse, perché l'evento mouseLeave verrà attivato in modo imprevisto (quando il cursore effettivo non si sta ancora muovendo).

Risorse

• Transizioni fluide e semplici con l'API View Transition
• Spiegazione: transizioni di visualizzazione per MPA
• Case study: navigazione fluida resa possibile dalle transizioni di visualizzazione
• Case study: The Web Can Do What!? | Offrire navigazioni simili a quelle delle app
• Interop Proposal: Make View Transitions available across browsers
• Vuoi segnalare un bug o richiedere una nuova funzionalità? Vogliamo conoscere la tua opinione per SPA e MPA.

Esplora gli altri articoli di questa serie che parlano di come le aziende di e-commerce hanno tratto vantaggio dall'utilizzo di nuove funzionalità CSS e UI come le animazioni basate sullo scorrimento, i popover, le query sui contenitori e il selettore has().

• Perché le funzionalità dell'interfaccia utente web sono importanti per il tuo sito di e-commerce?
• Case study sulle animazioni basate sullo scorrimento
• Case study sull'API Popover
• Case study sulle query sui contenitori
• :has() selector case studies