Le transizioni delle visualizzazioni sono transizioni animate e fluide tra i diversi stati di una pagina web o dell'interfaccia utente dell'applicazione. L'API View Transiziones è stata progettata per consentirti di creare questi effetti in un modo più diretto ed efficiente rispetto a prima. L'API offre diversi vantaggi rispetto ai precedenti approcci JavaScript, tra cui:
- Esperienza utente migliorata: transizioni fluide e segnali visivi guidano gli utenti nei cambiamenti 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 consente agli utenti di rimanere orientati all'interno dell'applicazione.
- Prestazioni: l'API cerca di utilizzare il minor numero possibile di risorse del thread principale, creando animazioni più fluide.
- Estetica moderna: il miglioramento delle transizioni contribuisce a un'esperienza utente elegante e coinvolgente.
Questo post fa parte di una serie in cui parla di come le aziende di e-commerce hanno migliorato il loro sito web utilizzando le nuove funzionalità CSS e UI. In questo articolo, scopri in che modo alcune aziende hanno implementato l'API View Transiziones e ne hanno tratto vantaggio.
redBus
redBus ha sempre cercato di creare la massima parità tra l'esperienza nativa e quella web. Prima dell'API View Transiziones, implementare queste animazioni nei nostri asset web era difficile. Tuttavia, con l'API è stato intuitivo creare transizioni tra più percorsi dell'utente per rendere l'esperienza web più simile a quella delle app. Tutti questi vantaggi, abbinati ai vantaggi in termini di prestazioni, lo rendono una funzionalità imprescindibile per tutti i siti web:Amit Kumar, Senior Engineering Manager, redBus.
Il team ha implementato le transizioni delle visualizzazioni in più punti. Ecco un esempio di una combinazione di dissolvenza in entrata e slide in animazione sull'icona di accesso sulla home page.
Codice
Questa implementazione utilizza più animazioniview-transition-namee personalizzate
(scale-downe scale-up). L'uso di view-transition-namecon un valore univoco
separa il componente di accesso dal resto della pagina per animarla
separatamente. La creazione di un nuovo view-transition-name univoco crea anche un nuovo
::view-transition-group nell'albero di pseudo-elementi (mostrato nel seguente
codice), 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ì facile che, usando
startViewTransition, si ottiene immediatamente una transizione 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 le transizioni delle visualizzazioni.
Questa è un'implementazione di base che verifica se il browser supporta startViewTransition e, in tal 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 delle norme
Il verticale di investimento di Policybazaar ha utilizzato l'API View Transiziones per fornire suggerimenti su elementi come "perché acquistare", rendendoli visivamente accattivanti e migliorando l'utilizzo di queste funzionalità.
Mediante l'incorporamento delle transizioni View, abbiamo eliminato codice JavaScript e CSS ripetitivo responsabile della gestione delle animazioni nei vari stati. Ciò ha consentito di ridurre il lavoro di sviluppo e migliorare notevolmente l'esperienza utente. AmanSoni, Tech Lead, Policybazaar.
Codice
Il codice seguente è simile agli esempi precedenti. Una cosa da notare è la
possibilità di ignorare gli stili e le animazioni predefiniti di
::view-transition-old(root)and::view-transition-new(root). In questo caso, il valore predefinito di 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 Transiziones
Quando utilizzi più effetti di transizione di visualizzazione sulla stessa pagina, assicurati di avere un nome di transizione di visualizzazione 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 poiché l'evento mouseLeave verrà attivato in modo imprevisto (quando il cursore effettivo non è ancora in movimento).
Risorse
- Transizioni fluide e semplici con l'API View Transiziones
- Spiegazione: visualizza le transizioni per MPA
- Case study: una navigazione semplificata grazie alle transizioni di tipo View
- Case study: il web può fare cosa? | Fornisci navigazioni come quelle delle app
- Proposta di interoperabilità: rendi disponibili le transizioni delle visualizzazioni tra 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 illustrano i vantaggi per le aziende di e-commerce dall'utilizzo di nuove funzionalità CSS e UI, come animazioni con scorrimento, popover, query relative al contenitore e il selettore has().