Visualizza i case study sulle transizioni

Swetha Gopalakrishnan

Saurabh Rajpal

Le transizioni di tipo Vista sono transizioni animate e senza interruzioni tra i diversi stati di una pagina web o dell'interfaccia utente 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 ai precedenti approcci JavaScript, 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 cerca di utilizzare il minor numero possibile di risorse del thread principale per 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 scopri 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. In precedenza, l'implementazione di queste animazioni nei nostri asset web era complessa. Tuttavia, con l'API abbiamo trovato intuitivo creare transizioni su più percorsi degli utenti per rendere l'esperienza web più simile a quella delle 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ù view-transition-namee animazioni 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 consente di manipolarlo 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 con dissolvenza quando l'utente passa da una miniatura di prodotto all'altra.

L'implementazione è così facile che con l'utilizzo di startViewTransition si ottiene immediatamente una transizione con dissolvenza più piacevole rispetto all'implementazione precedente senza alcun effetto: 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})} />

Bazar criteri

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

Incorporando le transizioni di visualizzazione, abbiamo eliminato il codice CSS e JavaScript ripetitivo responsabile della gestione delle animazioni in vari stati. Questo ha consentito di risparmiare lo sforzo di sviluppo e ha migliorato significativamente 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 di animation-duration è stato aggiornato a 0,4 s.

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 di transizione di visualizzazione 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 si muove ancora).

Risorse

• Transizioni semplici e fluide con l'API View Transizione
• Spiegazione: visualizzare le transizioni per l'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 le transizioni di visualizzazione disponibili su tutti i browser
• Vuoi segnalare un bug o richiedere una nuova funzionalità? Vogliamo conoscere la tua opinione su SPA e MPA.

Esplora gli altri articoli di questa serie che parlano di come le aziende di e-commerce hanno usufruito dei vantaggi derivanti dall'utilizzo di nuove funzionalità CSS e UI come animazioni basate su scorrimento, popover, query container 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()