Clicchi su un prodotto in un elenco e la sua foto scivola al suo posto nella scheda, mentre il resto della pagina cambia attorno. Fino a poco tempo fa un effetto del genere richiedeva una single page application costruita con un framework JavaScript. Le View Transitions lo portano anche nei siti tradizionali, fatti di pagine separate, con poche righe di CSS.
Il supporto è arrivato a tappe. Le transizioni nella stessa pagina, avviate da JavaScript, funzionano in Chrome ed Edge dalla versione 111 e in Safari dalla 18. Quelle tra documenti diversi dello stesso sito, le più interessanti, ci sono in Chrome ed Edge dalla 126 e in Safari dalla 18.2, uscita a dicembre. Firefox non le supporta ancora, ma chi lo usa vede una navigazione normale: nessun errore, solo nessuna animazione.
Una regola su entrambe le pagine
Per le transizioni tra pagine serve il consenso di tutte e due, e le pagine devono avere la stessa origine. Basta questa regola nel CSS comune:
@view-transition {
navigation: auto;
}Di base ottieni una dissolvenza incrociata. Se assegni lo stesso view-transition-name a un elemento in due pagine, per esempio la foto del prodotto nell’elenco e nella scheda, il browser lo anima dalla prima posizione alla seconda. Con gli pseudo-elementi ::view-transition-old e ::view-transition-new controlli durata e movimento.
Qualche cautela. Rispetta la preferenza prefers-reduced-motion, perché a chi soffre di disturbi vestibolari le animazioni possono dare nausea: per loro vanno disattivate o ridotte a una dissolvenza. Ogni view-transition-name deve comparire una sola volta per pagina, altrimenti la transizione salta. La durata giusta sta intorno ai 200–300 millisecondi; oltre, l’effetto da elegante diventa irritante. E ricorda che la transizione parte quando la nuova pagina è pronta: se il sito è lento, l’animazione non lo nasconde.
Comincia dalla regola @view-transition e guarda la dissolvenza di base. Poi scegli uno o due elementi da animare tra le pagine, non di più, e aggiungi subito la regola per il movimento ridotto. Infine apri il sito in Firefox. Se funziona benissimo anche lì, senza animazioni, hai fatto le cose nel modo giusto.
