You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/blog/2025/04/01/react-labs-what-we-have-been-working-on-april-2025.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -42,7 +42,7 @@ We're also sharing updates on new features currently in development:
42
42
43
43
# New Experimental Features {/*new-experimental-features*/}
44
44
45
-
Today we're sharing two new experimental feautres: View Transitions and Activity.
45
+
Today we're sharing two new experimental features: View Transitions and Activity.
46
46
47
47
These experimental features have been tested in production and we are confident they're stable, but the final API might change while we iterate on feedback.
48
48
@@ -51,7 +51,7 @@ You can try them by upgrading React packages to the most recent experimental ver
51
51
-`react@experimental`
52
52
-`react-dom@experimental`
53
53
54
-
Read more to see how to use these features in your app, or checkout the new docs published today:
54
+
Read more to see how to use these features in your app, or check out the new docs published today:
55
55
56
56
-[`<ViewTransition>`](/reference/react/ViewTransition): A component lets you activate an animation for a Transition.
57
57
-[`addTransitionType`](/reference/react/addTransitionType): A function that allows you to specify the cause of a Transition.
By default, these animations have the [default CSS animations for View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) applied (most are given a default smooth cross-fade). You can use [view transition psuedo-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, using `*` we can change the default for all animations:
93
+
By default, these animations have the [default CSS animations for View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) applied (most are given a default 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, using `*` we can change the default for all animations:
94
94
95
95
```
96
96
// "how" to animate.
@@ -104,7 +104,7 @@ By default, these animations have the [default CSS animations for View Transitio
104
104
105
105
When the DOM updates in an animation trigger such as `startTransition`, `useDeferredValue`, or switching Suspense fallbacks to content, React will use [declarative heuristics](/reference/react/ViewTransition#viewtransition) to automatically determine which `<ViewTransition>` components to activate for the animation. The browser will then run the animation that's defined in CSS.
106
106
107
-
If you're familar with the browser view transition APIs and curious how we've built support for them into React, checkout [How does View Transitions Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
107
+
If you're familiar with the browser view transition APIs and curious how we've built support for them into React, check out [How does `<ViewTransition>` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
108
108
109
109
In this post, let's take a look at a few examples of how to use View Transitions.
110
110
@@ -1278,7 +1278,7 @@ In our example app above, notice that there are already animations when you clic
Our app includes a Suspense-enabled router, with [page transitions already marked as Transitions](/reference/react/useTransition#building-a-suspense-enabled-router), which means navigations are performed with `startTranstion`:
1281
+
Our app includes a Suspense-enabled router, with [page transitions already marked as Transitions](/reference/react/useTransition#building-a-suspense-enabled-router), which means navigations are performed with `startTransition`:
1282
1282
1283
1283
```js
1284
1284
functionnavigate(url) {
@@ -2467,7 +2467,7 @@ If you're curious how this works, see the docs for [How does `<ViewTransition>`
2467
2467
2468
2468
By default, `<ViewTransition>` includes the default cross-fade from the browser.
2469
2469
2470
-
To customize animations, you can provide props to the `<ViewTranstion>` component to specify which animations to use, based on [how the `<ViewTransition>` activates](/reference/react/ViewTransition#props).
2470
+
To customize animations, you can provide props to the `<ViewTransition>` component to specify which animations to use, based on [how the `<ViewTransition>` activates](/reference/react/ViewTransition#props).
2471
2471
2472
2472
For example, we can slow down the `default` cross fade animation:
2473
2473
@@ -3676,7 +3676,7 @@ To do this you can add a unique `name` to the `<ViewTransition>`:
3676
3676
```js
3677
3677
<ViewTransition name={`video-${video.id}`}>
3678
3678
<Thumbnail video={video} />
3679
-
</ViewTranstion>
3679
+
</ViewTransition>
3680
3680
```
3681
3681
3682
3682
Now the video thumbnail animates between the two pages:
@@ -4871,7 +4871,7 @@ root.render(
4871
4871
4872
4872
</Sandpack>
4873
4873
4874
-
By default, React automatically generates a unique `name` for each element activated for a transition (see [How does `<ViewTransiton>` work](/reference/react/ViewTransition#how-does-viewtransition-work)). When React sees a transition where a `<ViewTransiton>` with a `name` is removed and a new `<ViewTransition>` with the same `name` is added, it will activate a shared element transtion.
4874
+
By default, React automatically generates a unique `name` for each element activated for a transition (see [How does `<ViewTransiton>` work](/reference/react/ViewTransition#how-does-viewtransition-work)). When React sees a transition where a `<ViewTransiton>` with a `name` is removed and a new `<ViewTransition>` with the same `name` is added, it will activate a shared element transition.
4875
4875
4876
4876
For more info, see the docs for [Animating a Shared Element](/reference/react/ViewTransition#animating-a-shared-element).
0 commit comments