Visualizza i case study sulle transizioni

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Le transizioni delle viste sono transizioni animate e senza interruzioni tra stati diversi. dell'interfaccia utente di una pagina web o di un'applicazione. La Visualizza API Transizione è stato progettato per di creare questi effetti in modo più diretto e performante rispetto è stato possibile in passato. L'API offre diversi vantaggi rispetto alle Approcci a JavaScript, tra cui:

  • Esperienza utente migliorata: gli utenti sono guidati da transizioni fluide e segnali visivi grazie alle modifiche all'interfaccia utente, che rendono la navigazione naturale e meno fastidiosa.
  • Continuità visiva:mantenimento di un senso di continuità tra le viste. riduce il carico cognitivo e aiuta gli utenti a rimanere orientati all'interno dell'applicazione.
  • Prestazioni: l'API tenta di utilizzare il numero di risorse thread principali il che crea animazioni più fluide.
  • estetica moderna: il miglioramento delle transizioni contribuisce a creare un aspetto un'esperienza utente coinvolgente.

Supporto dei browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: non supportato.
  • Safari: 18.

Origine

Questo post fa parte di una serie sul modo in cui le aziende di e-commerce ha migliorato il proprio sito web usando nuove funzionalità CSS e UI. In questo articolo, scoprirai il modo in cui alcune aziende hanno implementato l'API View Transizione e ne hanno usufruito.

redBus

redBus ha sempre cercato di creare la stessa parità tra i loro asset esperienze il più possibile. Prima dell'API View Transizione, l'implementazione animazioni sui nostri asset web era impegnativa. Con l'API, invece, l'abbiamo intuitiva creazione di transizioni su più percorsi dell'utente, in modo da rendere il web un'esperienza simile a quella di un'app. Tutto questo, insieme ai vantaggi in termini di prestazioni, lo rendono un devono disporre di funzionalità per tutti i siti web.-Amit Kumar, Senior Engineering Gestore, redBus.

Il team ha implementato le transizioni delle viste 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 .

Transizioni di dissolvenza e visualizzazione nella visualizzazione quando l'utente fa clic sul pulsante di accesso nella home page di redBus.

Codice

Questa implementazione utilizza piùview-transition-nameanimazioni personalizzate (scale-down e scale-up). 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 crea anche una nuova ::view-transition-groupnella struttura di pseudo-elemento (mostrata nel seguente ), consentendo di manipolarlo separatamente dal codice 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 cambia tra le miniature dei prodotti.

L'implementazione è così facile. Utilizzando startViewTransition abbiamo subito ottenere una transizione con una dissolvenza più piacevole rispetto all'implementazione precedente senza alcun effetto,Andy Wihalim, Senior Software Engineer, Tokopedia.

Prima

Dopo

Codice

Il codice seguente utilizza un framework React e include codice specifico del framework, ad esempio flushSync.Scopri di più sull'utilizzo dei framework per implementare la visualizzazione transizioni. Si tratta di un'implementazione di base che verifica se il browser supporta startViewTransition e, in questo caso, esegue la transizione. In caso contrario, recupera 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

Policybazaar di investimento verticale ha utilizzato l'API View Transizione per gli elementi della guida come "Why Buy", rendendole visivamente accattivanti e migliorandone l'utilizzo.

Incorporando le transizioni di visualizzazione, abbiamo eliminato CSS e JavaScript ripetitivi responsabile della gestione delle animazioni in vari stati. Questo elemento salvato impegno di sviluppo e migliorato significativamente l'esperienza utente.-Aman Soni, Tech Lead, Policybazaar.

di Gemini Advanced.
Visualizza l'animazione delle transizioni in "Perché acquistare da Policybazaar" CTA in una pagina di elenco degli investimenti.

Codice

Il seguente codice è simile agli esempi precedenti. Tieni presente che di ignorare gli stili e le animazioni predefiniti ::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 Transizione

Quando utilizzi più effetti di transizione di visualizzazione sulla stessa pagina, assicurati di: avere un nome di transizione della vista diverso per ogni effetto o sezione, in modo da evitare conflitti.

Mentre una transizione di visualizzazione è attiva (in fase di transizione), verrà aggiunto un nuovo livello in cima al resto dell'interfaccia utente. Evitate quindi di attivare la transizione al passaggio del mouse, l'evento mouseLeave verrà attivato in modo imprevisto (quando il cursore effettivo è ancora non si muovono).

Risorse

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