Transizioni di visualizzazione CSS: Un modo nuovo e semplice per animare il vostro sito web

In questo post esploriamo una nuova funzione di animazione CSS attualmente in fase di lancio, nota come CSS View Transitions. Vedremo come le transizioni di visualizzazione CSS consentono di aggiungere facilmente animazioni fluide e coinvolgenti a qualsiasi sito WordPress o WooCommerce.

La scorsa settimana abbiamo partecipato WordCamp Città del Capo 2023 in Sudafrica. La comunità locale WordPress ha dato il meglio di sé con relatori stimolanti, cibo delizioso e panorami mozzafiato! Abbiamo assistito a fantastici interventi di leader di pensiero locali, che hanno trattato tutto ciò che si spera di ascoltare a un WordCamp. Tra questi, storie meravigliose di come le persone hanno costruito le loro attività con WordPress, di come WordPress ha cambiato le loro vite e di numerosi approfondimenti sull'editoria e l'e-commerce. Una presentazione degna di nota è stato l'intervento sulle transizioni di visualizzazione CSS da parte di Schalk Venter.

Titolo Il futuro dell'animazione sul web, presentava un nostalgico riassunto degli inizi di Internet, della sua evoluzione e del suo stato attuale. Riflettendo su tecnologie del passato come Flash e Lightspeed ha evidenziato i nostri progressi e i cambiamenti significativi che il web ha subito. L'intervento ha inoltre sottolineato la semplicità e la potenza di Transizioni di visualizzazione CSS che mi è sembrato super eccitante e che vale la pena di condividere con voi, dato che può essere facilmente aggiunto a qualsiasi sito dell'evento.

Cosa sono le transizioni di visualizzazione CSS?

Le transizioni di visualizzazione CSS sono una nuova API introdotta per migliorare le animazioni web, facilitando la creazione di transizioni fluide tra i diversi stati di una pagina web. Questa funzione consente agli sviluppatori di definire le transizioni tra diverse visualizzazioni o elementi di una pagina senza dover ricorrere a JavaScript complessi o alla codifica manuale delle animazioni.

Il video seguente mostra come si possono aggiungere transizioni di pagina e di elemento a un sito web standard WordPress e WooCommerce. Quando si passa da una pagina all'altra, la nuova pagina si dissolve mentre quella vecchia si spegne. Quando si filtra la pagina dei prodotti, gli elementi con lo stesso nome di transizione si animano nella loro nuova posizione. Il tutto utilizzando solo poche righe di CSS!

Caratteristiche principali delle transizioni di visualizzazione CSS

• Sintassi dichiarativa: Definire le transizioni direttamente nel CSS senza ricorrere a JavaScript.
• Supporto cross-browser: Supportato dalla maggior parte dei browser moderni, con il supporto di Firefox previsto a breve.
• Ottimizzazione delle prestazioni: Le transizioni sono ottimizzate per le prestazioni, garantendo un'esperienza utente più fluida.

Esempio di base

Ciò che rende le transizioni di visualizzazione CSS così interessanti è la facilità con cui è possibile applicarle al sito. Ad esempio, aggiungendo semplicemente il seguente CSS al vostro sito, il browser potrà sfumare senza soluzione di continuità tra un caricamento di pagina e l'altro, creando immediatamente un'esperienza più fluida e simile a quella di un'applicazione.

@view-transition { navigation: auto; }

Animazione di elementi specifici

È possibile fare un ulteriore passo avanti e animare un elemento tra i caricamenti della pagina specificando il nome dell'elemento. Ad esempio, il codice seguente crea un effetto di transizione per una miniatura di un post con ID #post-1234. La miniatura si animerà elegantemente dalla pagina dell'elenco dei post alla pagina di visualizzazione dei post, il tutto utilizzando una sola riga di codice.

#post-1234 .wp-post-image { view-transition-name: item-1 }

Supporto dei browser e stato degli standard

L'API è ancora piuttosto sperimentale e attualmente è supportata dalle ultime versioni di Chrome, Edge, Opera e del browser Android. Safari ha hanno mostrato un interesse positivoe c'è un biglietto aperto per Adozione di Firefox. È necessario attendere il supporto formale di questi ultimi due browser prima di utilizzare l'API in un ambiente di produzione.

Casi d'uso pratici per WordPress e WooCommerce

1. Pagine di prodotto: Migliorate l'esperienza dell'utente animando le immagini dei prodotti tra l'elenco dei prodotti e le pagine dei dettagli dei prodotti.
2. Menu di navigazione: Create transizioni fluide tra le diverse sezioni del vostro sito web, rendendo la navigazione più intuitiva e coinvolgente.
3. Aggiornamenti dei contenuti: Animate i cambiamenti nei vostri contenuti, come gli estratti dei post del blog o le immagini in evidenza, per offrire un'esperienza più dinamica ai vostri lettori.

Conclusione

Le transizioni di visualizzazione CSS sono un ottimo strumento da aggiungere al vostro kit e che, a mio avviso, vedremo sempre più spesso nel prossimo futuro. Offrono un modo semplice ma potente per migliorare l'esperienza dell'utente attraverso animazioni fluide e coinvolgenti. Che stiate lavorando a un blog personale, a un sito web aziendale o a una piattaforma di e-commerce, le transizioni di visualizzazione CSS possono aiutarvi a creare una presenza sul web più curata e interattiva.