View transitions & missing features #11845
HertzaHaeon
started this conversation in
Proposals
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
After trying view transitions with React Router I've found some important missing features.
Demo
Here is my simple demo, basically a linear image gallery.
Going forward is a view transition sliding in the new image and sliding the old out. So far so good.
Going back has the same view transition but it should preferably animate the other direction. There doesn't seem to be a good solution to use different view transitions based on the type of navigation.
Bad solutions
It might solvable with
useViewTransitionState
but seems clunky to define by location and not by general navigation type. There's one location per image and I can't have one hook for every previous image.I could hijack the link click to set and unset a global class on the html, and use that in my CSS like so:
html.navigate-back::view-transition-name(image) { ... }
, which works but is also clunky (and adviced against). It doesn't work for the browser back button either.I could maybe also hijack navigation with
useBlocker
to set and unset a global html class if I detect a back navigation, but that seems like a big hack.Good solutions
My suggested solution is to use view transition types, maybe like so:
This plugs nicely into the new view transitions API, and is compatible with the existing prop.
However, I think it still wouldn't work for the back button. Note how the demo in the link above works fine even when clicking back, because they use the new Navigation API. There really should be a good way in React Router to do the same.
Yes, there's
useNavigationType
but it only gives mePOP
and lets me figure out from where in the stack it came. Maybe we could have auseNavigationDirection
for this.But that's not all. We would need to be able to signal back to React Router that before triggering a navigation after the back button click, we should use the given view transition type. There would have to be some way to jack into navigation events, which seems to be lacking now.
Hope this feedback is helpful. Thank you
Beta Was this translation helpful? Give feedback.
All reactions