CODEWITHSUNDEEP
javascriptreactjsanimationview-transitions-api
Sebastian Skov
Sebastian Skov

Reputation: 31

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

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

Upvotes: 3

Views: 4301

Answers (2)

Michael Tendo Ssemwanga
Michael Tendo Ssemwanga

Reputation: 19

Make sure no more than one item with same view-transition-name is one the same page at particular point in time. This was my issue

Upvotes: 1

kernel
kernel

Reputation: 3743

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.

Upvotes: 0

Related Questions