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 Transizione è stata progettata per consentirti di creare questi effetti in un modo più semplice e con prestazioni elevate rispetto a prima. L'API offre diversi vantaggi rispetto ai precedenti approcci JavaScript, tra cui:
- Esperienza utente migliorata: transizioni fluide e suggerimenti visivi guidano gli utenti attraverso le modifiche nell'interfaccia utente, rendendo la navigazione naturale e meno fastidiosa.
- Continuità visiva: il 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 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 elegante e coinvolgente.
Questo post fa parte di una serie che illustra come le aziende di e-commerce hanno migliorato il proprio sito web utilizzando nuove funzionalità CSS e UI. In questo articolo, scopri in che modo alcune aziende hanno implementato e sfruttato l'API View Transizione.
redBus
redBus ha sempre cercato di creare la maggiore parità possibile tra l'esperienza nativa e sul 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 questo, unito ai vantaggi in termini di prestazioni, lo rende una funzionalità imperdibile per tutti i siti web.—Amit Kumar, Senior Engineering Manager, 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.
Codice
Questa implementazione utilizza più animazioniview-transition-name(scale-down e scale-up). Se utilizzi view-transition-name con un valore univoco, il componente di accesso 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-groupnella struttura di pseudo-elemento (mostrata nel codice che segue), che può essere manipolato separatamente rispetto all'elemento 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
startViewTransitionsi ottiene immediatamente una transizione con dissolvenza più piacevole rispetto alla precedente implementazione 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,
ad esempio flushSync.Scopri di più sull'utilizzo dei framework per implementare le transizioni
delle viste.
Questa è un'implementazione di base che verifica se il browser supporta
startViewTransition e, in questo caso, esegue la transizione. In caso contrario, torna 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 per gli investimenti di Policybazaar ha utilizzato l'API View Transizione per gli elementi della guida, ad esempio "why acquistare", per renderli visivamente accattivanti e migliorare 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. Una cosa da notare è la possibilità di sostituire gli stili e le 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 Transizione
Quando utilizzi più effetti di transizione delle visualizzazioni sulla stessa pagina, assicurati di avere un nome diverso per la transizione delle visualizzazioni per ogni effetto o sezione, in modo da evitare conflitti.
Mentre una transizione di visualizzazione è attiva (in fase di transizione), aggiungerà un nuovo livello al 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 semplificata resa possibile grazie alle transizioni di visualizzazione
- Case study: il web può fare cosa?! | Offrire navigazioni come le app
- Proposta interoperabilità: rendi disponibili le transizioni delle viste su tutti i browser
- Vuoi segnalare un bug o richiedere una nuova funzionalità? Vogliamo conoscere la tua opinione in merito a 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().