Visualizza i case study sulle transizioni

Swetha Gopalakrishnan

Saurabh Rajpal

Le transizioni di visualizzazione sono transizioni animate e senza interruzioni tra stati diversi 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 fosse possibile in precedenza. L'API offre diversi vantaggi rispetto agli approcci JavaScript precedenti, tra cui:

• Esperienza utente migliorata: transizioni fluide e indicatori visivi guidano gli utenti tra le modifiche dell'interfaccia utente, rendendo la navigazione naturale e meno spiacevole.
• Continuità visiva:mantenere un senso di continuità tra le visualizzazioni riduce il carico cognitivo e aiuta gli utenti a mantenere l'orientamento all'interno dell'applicazione.
• Prestazioni: l'API tenta di utilizzare il minor numero possibile di risorse del thread principale, il che consente di creare 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 scoprirai come alcune aziende hanno implementato e beneficiato dell'API View Transition.

redBus

redBus ha sempre cercato di creare il maggior numero possibile di parità tra le sue esperienze native e web. Prima dell'API View Transition, l'implementazione di queste animazioni nelle nostre risorse web era complessa. Tuttavia, con l'API abbiamo riscontrato che è intuitivo creare transizioni tra più percorsi degli utenti per rendere l'esperienza web più simile a un'app. Tutto ciò, unito ai vantaggi in termini di prestazioni, la rende una funzionalità obbligatoria 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 combinazione di animazione di dissolvenza e scorrimento sull'icona di accesso nella home page.

Codice

Questa implementazione utilizza più animazioniview-transition-name e personalizzate (scale-down e scale-up). L'utilizzo di view-transition-name con un valore univoco separa il componente di accesso dal resto della pagina per animarlo separatamente. La creazione di un nuovo view-transition-name univoco comporta anche la creazione di un nuovo ::view-transition-group nell'albero degli pseudo-elementi (mostrato nel codice seguente), che può essere manipolato separatamente dal valore predefinito ::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

Il team ha utilizzato le transizioni di visualizzazione per aggiungere un'animazione di dissolvenza quando l'utente passa da una miniatura del 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 di visualizzazione. Si tratta di un'implementazione di base che verifica se il browser supportastartViewTransition e, in caso affermativo, esegue la transizione. In caso contrario, viene eseguito il fallback al 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

Il verticale di investimento di Policybazaar ha utilizzato l'API View Transition per gli elementi di suggerimenti utili come "Perché acquistare", rendendoli visivamente accattivanti e migliorando l'utilizzo di queste funzionalità.

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

Codice

Il seguente codice è simile agli esempi precedenti. Da notare la possibilità di eseguire l'override degli stili e delle animazioni predefiniti di ::view-transition-old(root)e::view-transition-new(root). In questo caso, il valore predefinito animation-duration è 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 di visualizzazione nella stessa pagina, assicurati di avere un nome view-transition-name diverso per ogni effetto o sezione per evitare conflitti.

Quando una transizione di visualizzazione è attiva (in transizione), viene 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 è ancora in movimento).

Risorse

• Transizioni semplici e fluide con l'API View Transition
• Spiegazione: transizioni di visualizzazione per gli annunci MPA
• Case study: navigazione fluida resa possibile con le transizioni di visualizzazione
• Case study: il web può fare cosa? | Offrire navigazioni simili a quelle delle app
• Proposta di interoperabilità: rendere disponibili le transizioni di visualizzazione su più browser
• Vuoi segnalare un bug o richiedere una nuova funzionalità? Vogliamo conoscere la tua opinione su SPA e MPA.

Consulta gli altri articoli di questa serie per scoprire in che modo le aziende di e-commerce hanno tratto vantaggio dall'utilizzo di nuove funzionalità CSS e UI, come animazioni basate sullo scorrimento, popover, query dei 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 Popup
• Case study su Container Queries
• Case study sul selettore:has()