View transitions not working when adding the view-transition-name property

Question

I'm currently working on a project in React and I'm having some trouble with view transitions. The specific property I'm having trouble with is view-transition-name.

when I don't assign the view-transition-name property to any elements, they crossfade as expected. However, things start to get strange when I assign the view-transition-name to the same element on both pages. Instead of a smooth transition, the element just abruptly appears in its new state - it's as if the transition isn't being applied at all.

when I then apply the view-transition-name property to the same element on only one of the pages, it will only transition one way. For example, if I navigate from Page A (with the property) to Page B (without the property), the transition works, but not smoothly, just the default crossfade. However, if I navigate from Page B to Page A, the transition does not occur - again, the element just abruptly appears as if I hadn't added the view-transition-name anywhere.

I have tried looking for solutions online but haven't found anything that seems to address this specific issue. Any insights on what might be causing this issue and how to resolve it would be greatly appreciated.

Here's the link to the codesandbox example: https://codesandbox.io/s/vibrant-tree-tq9ttc

Answer 1

It works when you flushSync your navigation state change, since document.startViewTransition requires synchronous DOM modifications to create a diff that can be transitioned.

See your modified example with that said fix working: https://codesandbox.io/s/silly-browser-qj9gyx?file=/src/page2.jsx

Edit: Credits of course go to https://malcolmkee.com/blog/view-transition-api-in-react-app/ from whom I learned this.