React's new <ViewTransition /> doesn't seem to work
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 7.9k
- Forks
- 190
- Avg merge
- 12h 50m
- Merged PRs (30d)
- 3
Description
I've been trying to get React's upcoming component to work, which is a wrapper over the browser view-transitions API with some niceties. However, I was not able to get this to work. I've replicated the example in the docs for the view-transitions API, and created an aroundNav, except instead of invoking it with document.startViewTransition, I use react's startTransition as they've described in their docs. I tried this both with and without the flushSync. In none of these scenarios could I get it work. Has anyone tried this yet? Any idea how I can get it to work?
const aroundNav: AroundNavHandler = (navigate, to, options) => {
startTransition(() => {
flushSync(() => {
navigate(to, options);
});
});
};
const App = () => {
return (
<StrictMode>
<Router aroundNav={aroundNav}>
// ...
I am seeing something to do with viewtransitions flash near the <html> node in Chrome's web inspector's elements panel, but it goes away too soon know what it says, but I suspect it's something React is doing. However in the animations panel in Chrome, I don't see any animation running, but I expect to see the standard fade animations provided by the default view-transitions API.
Any idea what I might be doing wrong?
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the provided TypeScript aroundNav example and the Router integration, then reproduce navigation with and without flushSync using React's ViewTransition documentation. Inspect Chrome's view-transition entry and animations panel; done means identifying why no transition appears and documenting a verified fix or required usage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Needs clarification
- Newbie friendliness
- 45/100