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.
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 .
Codice
Questa implementazione utilizza piùview-transition-name
animazioni 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-group
nella 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.
di Gemini Advanced.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.
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
- 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?! | Garantire una navigazione simile a quella delle 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 APS e MPA.
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()
.