React's new <ViewTransition /> doesn't seem to work
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?
Source: molefrog/wouter