{"id":187095,"date":"2024-08-06T06:07:21","date_gmt":"2024-08-06T13:07:21","guid":{"rendered":"https:\/\/www.fooevents.com\/?p=187095"},"modified":"2024-08-07T00:42:05","modified_gmt":"2024-08-07T07:42:05","slug":"transizioni-di-vista-in-css","status":"publish","type":"post","link":"https:\/\/www.fooevents.com\/it\/css-view-transitions\/","title":{"rendered":"Transizioni di visualizzazione CSS: Un modo nuovo e semplice per animare il vostro sito web"},"content":{"rendered":"<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-large wp-image-187148\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-1024x667.png\" alt=\"Transizioni di visualizzazione CSS Immagine caratteristica di una lampadina\" width=\"1024\" height=\"667\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-1024x667.png 1024w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-300x195.png 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-768x500.png 768w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-18x12.png 18w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1-512x333.png 512w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-1.png 1161w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p class=\"blog-intro\">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.<\/p>\n<p>La scorsa settimana abbiamo partecipato <a href=\"https:\/\/capetown.wordcamp.org\/2024\/\" rel=\"nofollow noopener\" target=\"_blank\">WordCamp Citt\u00e0 del Capo 2023<\/a> in Sudafrica. La comunit\u00e0 locale WordPress ha dato il meglio di s\u00e9 con relatori stimolanti, cibo delizioso e panorami mozzafiato! Abbiamo assistito a fantastici interventi di leader di pensiero locali, che hanno trattato tutto ci\u00f2 che si spera di ascoltare a un WordCamp. Tra questi, storie meravigliose di come le persone hanno costruito le loro attivit\u00e0 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 \u00e8 stato l'intervento sulle transizioni di visualizzazione CSS da parte di <a href=\"https:\/\/www.schalkventer.me\/\" rel=\"nofollow noopener\" target=\"_blank\">Schalk Venter<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-187120 size-large\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-1024x768.jpg\" alt=\"Il team di FooEvents partecipa alla conferenza CSS View Transitions al WordCamp di Citt\u00e0 del Capo 2024.\" width=\"1024\" height=\"768\" title=\"\" srcset=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-1024x768.jpg 1024w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-300x225.jpg 300w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-768x576.jpg 768w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-1536x1152.jpg 1536w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-2048x1536.jpg 2048w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-16x12.jpg 16w, https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/IMG_2820-e1722940750571-512x384.jpg 512w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Titolo <a href=\"https:\/\/capetown.wordcamp.org\/2024\/session\/css-view-transitions-the-future-of-animation-on-the-web\/\" rel=\"nofollow noopener\" target=\"_blank\">Il futuro dell'animazione sul web<\/a>, presentava un nostalgico <a href=\"https:\/\/slides.com\/schalkventer\/css-view-animations\" rel=\"nofollow noopener\" target=\"_blank\">riassunto<\/a> degli inizi di Internet, della sua evoluzione e del suo stato attuale. Riflettendo su tecnologie del passato come <a href=\"https:\/\/en.wikipedia.org\/wiki\/Adobe_Flash\" rel=\"nofollow noopener\" target=\"_blank\">Flash<\/a> e Lightspeed ha evidenziato i nostri progressi e i cambiamenti significativi che il web ha subito. L'intervento ha inoltre sottolineato la semplicit\u00e0 e la potenza di <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">Transizioni di visualizzazione CSS<\/a> che mi \u00e8 sembrato super eccitante e che vale la pena di condividere con voi, dato che pu\u00f2 essere facilmente aggiunto a qualsiasi <a href=\"https:\/\/www.fooevents.com\/it\/vendere-biglietti\/\">sito dell'evento<\/a>.<\/p>\n<h3><strong>Cosa sono le transizioni di visualizzazione CSS?<\/strong><\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\" rel=\"nofollow noopener\" target=\"_blank\">Le transizioni di visualizzazione CSS sono una nuova API<\/a> 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.<\/p>\n<p>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!<\/p>\n<div style=\"width: 970px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-187095-1\" width=\"970\" height=\"720\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-Demo.mp4?_=1\" \/><a href=\"https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-Demo.mp4\">https:\/\/www.fooevents.com\/wp-content\/uploads\/2024\/08\/CSS-View-Transitions-Demo.mp4<\/a><\/video><\/div>\n<h3><strong>Caratteristiche principali delle transizioni di visualizzazione CSS<\/strong><\/h3>\n<ul>\n<li><strong>Sintassi dichiarativa:<\/strong> Definire le transizioni direttamente nel CSS senza ricorrere a JavaScript.<\/li>\n<li><strong>Supporto cross-browser:<\/strong> Supportato dalla maggior parte dei browser moderni, con il supporto di Firefox previsto a breve.<\/li>\n<li><strong>Ottimizzazione delle prestazioni:<\/strong> Le transizioni sono ottimizzate per le prestazioni, garantendo un'esperienza utente pi\u00f9 fluida.<\/li>\n<\/ul>\n<h3><strong>Esempio di base<\/strong><\/h3>\n<p>Ci\u00f2 che rende le transizioni di visualizzazione CSS cos\u00ec interessanti \u00e8 la facilit\u00e0 con cui \u00e8 possibile applicarle al sito. Ad esempio, aggiungendo semplicemente il seguente CSS al vostro sito, il browser potr\u00e0 sfumare senza soluzione di continuit\u00e0 tra un caricamento di pagina e l'altro, creando immediatamente un'esperienza pi\u00f9 fluida e simile a quella di un'applicazione.<\/p>\n<pre>@view-transition { navigation: auto; }<\/pre>\n<h3><strong>Animazione di elementi specifici<\/strong><\/h3>\n<p>\u00c8 possibile fare un ulteriore passo avanti e <a href=\"https:\/\/github.com\/schalkventer\/css-view-transition-resources?tab=readme-ov-file#hello-world-examplesbasic-intro\" rel=\"nofollow noopener\" target=\"_blank\">animare un elemento tra i caricamenti della pagina<\/a> 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\u00e0 elegantemente dalla pagina dell'elenco dei post alla pagina di visualizzazione dei post, il tutto utilizzando una sola riga di codice.<\/p>\n<pre>#post-1234 .wp-post-image { view-transition-name: item-1 }<\/pre>\n<h3><strong>Supporto dei browser e stato degli standard<\/strong><\/h3>\n<p>L'API \u00e8 ancora piuttosto sperimentale e attualmente \u00e8 supportata dalle ultime versioni di Chrome, Edge, Opera e del browser Android. Safari ha <a href=\"https:\/\/github.com\/WebKit\/standards-positions\/issues\/48\" rel=\"nofollow noopener\" target=\"_blank\">hanno mostrato un interesse positivo<\/a>e c'\u00e8 un biglietto aperto per <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1823896\" rel=\"nofollow noopener\" target=\"_blank\">Adozione di Firefox<\/a>. \u00c8 necessario attendere il supporto formale di questi ultimi due browser prima di utilizzare l'API in un ambiente di produzione.<\/p>\n<h3><strong>Casi d'uso pratici per WordPress e WooCommerce<\/strong><\/h3>\n<ol>\n<li><strong>Pagine di prodotto:<\/strong> Migliorate l'esperienza dell'utente animando le immagini dei prodotti tra l'elenco dei prodotti e le pagine dei dettagli dei prodotti.<\/li>\n<li><strong>Menu di navigazione:<\/strong> Create transizioni fluide tra le diverse sezioni del vostro sito web, rendendo la navigazione pi\u00f9 intuitiva e coinvolgente.<\/li>\n<li><strong>Aggiornamenti dei contenuti:<\/strong> Animate i cambiamenti nei vostri contenuti, come gli estratti dei post del blog o le immagini in evidenza, per offrire un'esperienza pi\u00f9 dinamica ai vostri lettori.<\/li>\n<\/ol>\n<h3><strong>Conclusione<\/strong><\/h3>\n<p>Le transizioni di visualizzazione CSS sono un ottimo strumento da aggiungere al vostro kit e che, a mio avviso, vedremo sempre pi\u00f9 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\u00f9 curata e interattiva.<\/p>\n<div class=\"highlight-box\">\n<h3><strong>Risorse aggiuntive<\/strong><\/h3>\n<p>Se desiderate saperne di pi\u00f9 sulle transizioni di visualizzazione CSS, consultate i seguenti articoli che contengono ulteriori dettagli tecnici:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2023\/12\/view-transitions-api-ui-animations-part1\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.smashingmagazine.com\/2023\/12\/view-transitions-api-ui-animations-part1\/<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/schalkventer\/css-view-transition-resources\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/github.com\/schalkventer\/css-view-transition-resources<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/v\/view-transition\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/css-tricks.com\/almanac\/selectors\/v\/view-transition\/<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::view-transition\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::view-transition<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=cGbKAqrul0w\" target=\"_blank\" rel=\"noopener\">https:\/\/www.youtube.com\/watch?v=cGbKAqrul0w<\/a><\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In this post, we explore a new CSS animation feature currently being rolled out, known as CSS View Transitions. We&#8217;ll take a look at how CSS View Transitions make it easy to add smooth, engaging animations to any WordPress or WooCommerce site. Last week, we attended WordCamp Cape Town 2023 in South Africa. The local [&hellip;]<\/p>\n","protected":false},"author":1138,"featured_media":187148,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[49,53],"tags":[],"class_list":["post-187095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-footips","category-howto"],"_links":{"self":[{"href":"https:\/\/www.fooevents.com\/it\/wp-json\/wp\/v2\/posts\/187095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fooevents.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fooevents.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/it\/wp-json\/wp\/v2\/users\/1138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/it\/wp-json\/wp\/v2\/comments?post=187095"}],"version-history":[{"count":0,"href":"https:\/\/www.fooevents.com\/it\/wp-json\/wp\/v2\/posts\/187095\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fooevents.com\/it\/wp-json\/wp\/v2\/media\/187148"}],"wp:attachment":[{"href":"https:\/\/www.fooevents.com\/it\/wp-json\/wp\/v2\/media?parent=187095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fooevents.com\/it\/wp-json\/wp\/v2\/categories?post=187095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fooevents.com\/it\/wp-json\/wp\/v2\/tags?post=187095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}