add scoped view transitions to fix gift card navigation#768
add scoped view transitions to fix gift card navigation#768gudnuf wants to merge 1 commit intogift-cards-2from
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
| @@ -1,8 +1,4 @@ | |||
| /* Available cards section - fade out/in */ | |||
| .view-transition-available { | |||
| view-transition-name: available-cards; | |||
There was a problem hiding this comment.
I removed these utility classes because in some places we were using them and in others we were setting the viewTransitionName in the style prop. I decided now that we have the dynamically applied styles I liked setting the name directly on the style prop, but we could also only use css classes.
If we only use css classes then useScopedTransitionName would either have to prefix the name passed by the caller with view-transition or the caller would have to pass the full class name like view-transition-available. This just seemed more confusing to me.
|
|
||
| /* Transactions section - slide up/down with fade */ | ||
|
|
||
| /* Slide + fade animations for transactions */ |
There was a problem hiding this comment.
this comment seemed unnecessary
| // | ||
| // Solution: Use requestAnimationFrame to delay hasSettled until after the | ||
| // browser has captured its snapshot (next frame). | ||
| // --------------------------------------------------------------------------- |
There was a problem hiding this comment.
I spent a bunch of time debugging this and I ended up using Cursor's debug mode with everything that I found and it figured it out pretty quick.
Originally, I just compared the targetScope with the result from getViewTransitionScope. This worked when already in the gift-cards scope and just going back and forth between /gift-cards and /gift-cards/$cardId.
The problem came when I would navigate from / to /gift-cards because transition names were not set on any of the elements that they should have been set on. The behavior I was seeing is that the transition would work as expected when going from / to /gift-cards, but then when I would navigate to /gift-cards/$cardId the individual elements were not animated.
|
|
||
| export default function GiftCardDetails({ cardId }: GiftCardDetailsProps) { | ||
| const navigate = useNavigate(); | ||
| const navigate = useNavigateWithViewTransition(); |
There was a problem hiding this comment.
btw, when testing on the gift-cards-2 branch without changing this to useNavigateWithViewTransition I didn't see the X moving like you said so I changed it here.
I do see the problem without these changes when clicking a discover card. The problem is there either way, so I will see about fixing that by applying transition name styles to the add-gift-card.tsx component
|
closing because I found |
1 participant
I made it so our view transitions can now accept a
scopewhich allows us to conditionally apply view transition styles. The reason that we need this is for navigation to/from routes that should not use those view transition styles. Previously, if you navigated from/to/gift-cardsthen the view transitions styles would be applied and the entire page didn't just slide in like it should. You can see the old behavior in Discord