diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md index 95821fc43..ba2d1dcd3 100644 --- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md +++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md @@ -1,94 +1,101 @@ --- -title: "React Labs: View Transitions, Activity, and more" +title: "React Labs: View Transitions, Activity e altro" author: Ricky Hanlon date: 2025/04/23 -description: In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and updates on other areas we're working on now. +description: Nei post React Labs scriviamo dei progetti in ricerca e sviluppo attivi. In questo post condividiamo due nuove funzionalità sperimentali pronte da provare oggi e aggiornamenti su altre aree su cui stiamo lavorando. +translationStatus: ai-draft --- -April 23, 2025 by [Ricky Hanlon](https://twitter.com/rickhanlonii) +23 aprile 2025 di [Ricky Hanlon](https://twitter.com/rickhanlonii) --- + + +Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md). + + + -In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and updates on other areas we're working on now. +Nei post React Labs scriviamo dei progetti in ricerca e sviluppo attivi. In questo post condividiamo due nuove funzionalità sperimentali pronte da provare oggi e aggiornamenti su altre aree su cui stiamo lavorando. -Today, we're excited to release documentation for two new experimental features that are ready for testing: +Oggi siamo entusiasti di pubblicare la documentazione per due nuove funzionalità sperimentali pronte per i test: - [View Transitions](#view-transitions) - [Activity](#activity) -We're also sharing updates on new features currently in development: +Condividiamo anche aggiornamenti su nuove funzionalità attualmente in sviluppo: - [React Performance Tracks](#react-performance-tracks) - [Compiler IDE Extension](#compiler-ide-extension) -- [Automatic Effect Dependencies](#automatic-effect-dependencies) +- [Dipendenze automatiche degli Effetti](#automatic-effect-dependencies) - [Fragment Refs](#fragment-refs) - [Concurrent Stores](#concurrent-stores) --- -# New Experimental Features {/*new-experimental-features*/} +# Nuove funzionalità sperimentali {/*new-experimental-features*/} -`` has shipped in `react@19.2`. +`` è disponibile in `react@19.2`. -`` and `addTransitionType` are now available in `react@canary`. +`` e `addTransitionType` sono ora disponibili in `react@canary`. -View Transitions and Activity are now ready for testing in `react@experimental`. These features have been tested in production and are stable, but the final API may still change as we incorporate feedback. +View Transitions e Activity sono ora pronte per i test in `react@experimental`. Queste funzionalità sono state testate in produzione e sono stabili, ma l'API finale potrebbe ancora cambiare man mano che incorporiamo feedback. -You can try them by upgrading React packages to the most recent experimental version: +Puoi provarle aggiornando i pacchetti React alla versione sperimentale più recente: - `react@experimental` - `react-dom@experimental` -Read on to learn how to use these features in your app, or check out the newly published docs: +Continua a leggere per scoprire come usare queste funzionalità nella tua app, oppure consulta la documentazione appena pubblicata: -- [``](/reference/react/ViewTransition): A component that lets you activate an animation for a Transition. -- [`addTransitionType`](/reference/react/addTransitionType): A function that allows you to specify the cause of a Transition. -- [``](/reference/react/Activity): A component that lets you hide and show parts of the UI. +- [``](/reference/react/ViewTransition): Un componente che ti permette di attivare un'animazione per una Transizione. +- [`addTransitionType`](/reference/react/addTransitionType): Una funzione che ti permette di specificare la causa di una Transizione. +- [``](/reference/react/Activity): Un componente che ti permette di nascondere e mostrare parti dell'UI. ## View Transitions {/*view-transitions*/} -React View Transitions are a new experimental feature that makes it easier to add animations to UI transitions in your app. Under-the-hood, these animations use the new [`startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) API available in most modern browsers. +Le View Transitions di React sono una nuova funzionalità sperimentale che rende più semplice aggiungere animazioni alle transizioni UI nella tua app. Sotto il cofano, queste animazioni usano la nuova API [`startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) disponibile nella maggior parte dei browser moderni. -To opt-in to animating an element, wrap it in the new `` component: +Per attivare l'animazione di un elemento, avvolgilo nel nuovo componente ``: ```js -// "what" to animate. +// "cosa" animare. -
animate me
+
animami
``` -This new component lets you declaratively define "what" to animate when an animation is activated. +Questo nuovo componente ti permette di definire in modo dichiarativo "cosa" animare quando un'animazione viene attivata. -You can define "when" to animate by using one of these three triggers for a View Transition: +Puoi definire "quando" animare usando uno di questi tre trigger per una View Transition: ```js -// "when" to animate. +// "quando" animare. -// Transitions +// Transizioni startTransition(() => setState(...)); -// Deferred Values +// Valori differiti const deferred = useDeferredValue(value); // Suspense }> -
Loading...
+
Caricamento...
``` -By default, these animations use the [default CSS animations for View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) applied (typically a smooth cross-fade). You can use [view transition pseudo-selectors](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree) to define "how" the animation runs. For example, you can use `*` to change the default animation for all transitions: +Per impostazione predefinita, queste animazioni usano le [animazioni CSS predefinite per le View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) (tipicamente un cross-fade fluido). Puoi usare i [pseudo-selettori view transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree) per definire "come" l'animazione viene eseguita. Per esempio, puoi usare `*` per cambiare l'animazione predefinita per tutte le transizioni: ``` -// "how" to animate. +// "come" animare. ::view-transition-old(*) { animation: 300ms ease-out fade-out; } @@ -97,16 +104,16 @@ By default, these animations use the [default CSS animations for View Transition } ``` -When the DOM updates due to an animation trigger—like `startTransition`, `useDeferredValue`, or a `Suspense` fallback switching to content—React will use [declarative heuristics](/reference/react/ViewTransition#viewtransition) to automatically determine which `` components to activate for the animation. The browser will then run the animation that's defined in CSS. +Quando il DOM si aggiorna a causa di un trigger di animazione—come `startTransition`, `useDeferredValue` o un fallback `Suspense` che passa al contenuto—React userà [euristiche dichiarative](/reference/react/ViewTransition#viewtransition) per determinare automaticamente quali componenti `` attivare per l'animazione. Il browser eseguirà quindi l'animazione definita in CSS. -If you're familiar with the browser's View Transition API and want to know how React supports it, check out [How does `` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs. +Se conosci la View Transition API del browser e vuoi sapere come React la supporta, consulta [Come funziona ``](/reference/react/ViewTransition#how-does-viewtransition-work) nella documentazione. -In this post, let's take a look at a few examples of how to use View Transitions. +In questo post, diamo un'occhiata ad alcuni esempi di come usare le View Transitions. -We'll start with this app, which doesn't animate any of the following interactions: -- Click a video to view the details. -- Click "back" to go back to the feed. -- Type in the list to filter the videos. +Partiamo da questa app, che non anima nessuna delle seguenti interazioni: +- Clicca un video per vedere i dettagli. +- Clicca "indietro" per tornare al feed. +- Digita nella lista per filtrare i video. @@ -116,7 +123,7 @@ import TalkDetails from './Details'; import Home from './Home'; import {useRoute export default function App() { const {url} = useRouter(); - // 🚩This version doesn't include any animations yet + // 🚩Questa versione non include ancora animazioni return url === '/' ? : ; } ``` @@ -162,7 +169,7 @@ export default function Details() { navigateBack("/"); }} > - Back + Indietro } > @@ -192,7 +199,7 @@ function SearchInput({ value, onChange }) { return (
e.preventDefault()}>
@@ -201,7 +208,7 @@ function SearchInput({ value, onChange }) { onChange(e.target.value)} /> @@ -232,11 +239,11 @@ export default function Home() { const [searchText, setSearchText] = useState(""); const foundVideos = filterVideos(videos, searchText); return ( - {count} Videos
}> + {count} video
}>
{foundVideos.length === 0 && ( -
No results
+
Nessun risultato
)}
{foundVideos.map((video) => ( @@ -394,8 +401,8 @@ export default function Page({ heading, children }) { import {useState} from 'react'; import {Heart} from './Icons'; -// A hack since we don't actually have a backend. -// Unlike local state, this survives videos being filtered. +// Un trucco poiché non abbiamo un backend reale. +// A differenza dello state locale, questo sopravvive al filtraggio dei video. const likedVideos = new Set(); export default function LikeButton({video}) { @@ -404,7 +411,7 @@ export default function LikeButton({video}) { return (
} > @@ -1386,7 +1393,7 @@ function SearchInput({ value, onChange }) { return ( e.preventDefault()}>
@@ -1395,7 +1402,7 @@ function SearchInput({ value, onChange }) { onChange(e.target.value)} /> @@ -1426,11 +1433,11 @@ export default function Home() { const [searchText, setSearchText] = useState(""); const foundVideos = filterVideos(videos, searchText); return ( - {count} Videos
}> + {count} video
}>
{foundVideos.length === 0 && ( -
No results
+
Nessun risultato
)}
{foundVideos.map((video) => ( @@ -1576,8 +1583,8 @@ export default function Page({ heading, children }) { {isPending && }
- {/* Opt-out of ViewTransition for the content. */} - {/* Content can define it's own ViewTransition. */} + {/* Escludi ViewTransition per il contenuto. */} + {/* Il contenuto può definire la propria ViewTransition. */}
{children}
@@ -1592,8 +1599,8 @@ export default function Page({ heading, children }) { import {useState} from 'react'; import {Heart} from './Icons'; -// A hack since we don't actually have a backend. -// Unlike local state, this survives videos being filtered. +// Un trucco poiché non abbiamo un backend reale. +// A differenza dello state locale, questo sopravvive al filtraggio dei video. const likedVideos = new Set(); export default function LikeButton({video}) { @@ -1602,7 +1609,7 @@ export default function LikeButton({video}) { return (
} > @@ -2600,7 +2607,7 @@ function SearchInput({ value, onChange }) { return ( e.preventDefault()}>
@@ -2609,7 +2616,7 @@ function SearchInput({ value, onChange }) { onChange(e.target.value)} /> @@ -2640,11 +2647,11 @@ export default function Home() { const [searchText, setSearchText] = useState(""); const foundVideos = filterVideos(videos, searchText); return ( - {count} Videos
}> + {count} video
}>
{foundVideos.length === 0 && ( -
No results
+
Nessun risultato
)}
{foundVideos.map((video) => ( @@ -2790,8 +2797,8 @@ export default function Page({ heading, children }) { {isPending && }
- {/* Opt-out of ViewTransition for the content. */} - {/* Content can define it's own ViewTransition. */} + {/* Escludi ViewTransition per il contenuto. */} + {/* Il contenuto può definire la propria ViewTransition. */}
{children}
@@ -2806,8 +2813,8 @@ export default function Page({ heading, children }) { import {useState} from 'react'; import {Heart} from './Icons'; -// A hack since we don't actually have a backend. -// Unlike local state, this survives videos being filtered. +// Un trucco poiché non abbiamo un backend reale. +// A differenza dello state locale, questo sopravvive al filtraggio dei video. const likedVideos = new Set(); export default function LikeButton({video}) { @@ -2816,7 +2823,7 @@ export default function LikeButton({video}) { return (
} > @@ -3794,7 +3801,7 @@ function SearchInput({ value, onChange }) { return ( e.preventDefault()}>
@@ -3803,7 +3810,7 @@ function SearchInput({ value, onChange }) { onChange(e.target.value)} /> @@ -3834,11 +3841,11 @@ export default function Home() { const [searchText, setSearchText] = useState(""); const foundVideos = filterVideos(videos, searchText); return ( - {count} Videos
}> + {count} video
}>
{foundVideos.length === 0 && ( -
No results
+
Nessun risultato
)}
{foundVideos.map((video) => ( @@ -3984,8 +3991,8 @@ export default function Page({ heading, children }) { {isPending && }
- {/* Opt-out of ViewTransition for the content. */} - {/* Content can define it's own ViewTransition. */} + {/* Escludi ViewTransition per il contenuto. */} + {/* Il contenuto può definire la propria ViewTransition. */}
{children}
@@ -4000,8 +4007,8 @@ export default function Page({ heading, children }) { import {useState} from 'react'; import {Heart} from './Icons'; -// A hack since we don't actually have a backend. -// Unlike local state, this survives videos being filtered. +// Un trucco poiché non abbiamo un backend reale. +// A differenza dello state locale, questo sopravvive al filtraggio dei video. const likedVideos = new Set(); export default function LikeButton({video}) { @@ -4010,7 +4017,7 @@ export default function LikeButton({video}) { return (
}> + {count} video
}> @@ -8991,7 +8998,7 @@ function SearchInput({ value, onChange }) { return ( e.preventDefault()}>
@@ -9000,7 +9007,7 @@ function SearchInput({ value, onChange }) { onChange(e.target.value)} /> @@ -9154,7 +9161,7 @@ export default function Page({ heading, children }) {
- {/* Custom classes based on transition type. */} + {/* Classi personalizzate in base al transition type. */} }
- {/* Opt-out of ViewTransition for the content. */} - {/* Content can define it's own ViewTransition. */} + {/* Escludi ViewTransition per il contenuto. */} + {/* Il contenuto può definire la propria ViewTransition. */}
{children}
@@ -9182,8 +9189,8 @@ export default function Page({ heading, children }) { import {useState} from 'react'; import {Heart} from './Icons'; -// A hack since we don't actually have a backend. -// Unlike local state, this survives videos being filtered. +// Un trucco poiché non abbiamo un backend reale. +// A differenza dello state locale, questo sopravvive al filtraggio dei video. const likedVideos = new Set(); export default function LikeButton({video}) { @@ -9192,7 +9199,7 @@ export default function LikeButton({video}) { return (
}> + {count} video
}> @@ -10307,7 +10314,7 @@ function SearchInput({ value, onChange }) { return ( e.preventDefault()}>
@@ -10316,7 +10323,7 @@ function SearchInput({ value, onChange }) { onChange(e.target.value)} /> @@ -10469,7 +10476,7 @@ export default function Page({ heading, children }) {
- {/* Custom classes based on transition type. */} + {/* Classi personalizzate in base al transition type. */} }
- {/* Opt-out of ViewTransition for the content. */} - {/* Content can define it's own ViewTransition. */} + {/* Escludi ViewTransition per il contenuto. */} + {/* Il contenuto può definire la propria ViewTransition. */}
{children}
@@ -10497,8 +10504,8 @@ export default function Page({ heading, children }) { import {useState} from 'react'; import {Heart} from './Icons'; -// A hack since we don't actually have a backend. -// Unlike local state, this survives videos being filtered. +// Un trucco poiché non abbiamo un backend reale. +// A differenza dello state locale, questo sopravvive al filtraggio dei video. const likedVideos = new Set(); export default function LikeButton({video}) { @@ -10507,7 +10514,7 @@ export default function LikeButton({video}) { return (