Refactor to use view transitions for card animations#765
Refactor to use view transitions for card animations#765gudnuf merged 3 commits 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. |
jbojcic1
force-pushed
the
gift-cards-view-transitions
branch
from
8e62d32 to
3ba5f32
Compare
jbojcic1
force-pushed
the
gift-cards-view-transitions
branch
from
3ba5f32 to
9d1bcb5
Compare
| ) { | ||
| return extendedData | ||
| .slice() | ||
| .sort( |
There was a problem hiding this comment.
I needed to add this sort because I noticed that the order of accounts returned by upsert user db function was different then the order returned by making a get call to get all accounts which was making gift-cards page show one order on initial render and different after rerender
|
I made this mostly with claude code by giving it my other example repo and your gift card branch and telling it I want to do the transitions like in my example repo (with some additional details). Then had to do some manual cleanup. Besides work for transitions I also make some naming updates to make things more clear and to follow our approach so far (what goes to route, what goes to feature component, etc.) It seems to be working fine but please double check |
| size?: WalletCardSize; | ||
| className?: string; | ||
| /** When true, the info overlay (name, balance, gradient) fades out */ | ||
| overlayHidden?: boolean; |
There was a problem hiding this comment.
This was used so that the selected card doesn't show the balance and gift card name, just the image.
And the animations removed below make it so that as the card is changin state the overlay fades in or out.
There was a problem hiding this comment.
ok we can return it
| const giftCardsToDiscover = useDiscoverGiftCards(); | ||
|
|
||
| const handleCardClick = (account: CashuAccount) => { | ||
| navigate(`/gift-cards/${account.id}`, { viewTransition: true }); |
There was a problem hiding this comment.
why not useNavigateWithViewTransition?
There was a problem hiding this comment.
i thought it might mess with the card transition since that is tailored for transitioning the entire view. I might be wrong. we should try it
There was a problem hiding this comment.
I was right. it does mess it up. you can see things like x button moving etc.
There was a problem hiding this comment.
we should either keep it as is or update useNavigateWithViewTransition so it can be used for cases like this where we are only transitioning certain elements between the views instead of entire view
There was a problem hiding this comment.
Okay I say we just keep as is for now then see about that later.
I want to do this same type of view transition for things like the send and receive flows and other places where the header or other page content stays the same across flows. For example, when our send confirmation screen goes to the pending transaction details this type of transition would look better. We can see then if there's something that makes sense to change about useNavigateWithViewTransition and LinkWithViewTransition
|
|
||
| /* Ensure cards maintain their stacking during transition */ | ||
| ::view-transition-image-pair(*) { | ||
| isolation: auto; |
There was a problem hiding this comment.
is this what was needed to make all the cards be in the same stacking context? I also saw you put all the cards in the gift-card-details.tsx, is that needed too?
There was a problem hiding this comment.
claude added that and I forgot to check what is it for. seems to be working without it too
There was a problem hiding this comment.
I also saw you put all the cards in the gift-card-details.tsx, is that needed too?
that part is needed. that how view transition works. you have element with same view transition name on two pages and then browser transitions it. thus to transition other cards too when one is selected we need to have them on destination screen as well
There was a problem hiding this comment.
checked it and this and some other stuff was not needed. in fact z-index set on transactions was making it visible over cards slightly. cleaned up in ec65137
* Refactor to use view transitions for card animations * Cleanup * Add back fade in/out transition for gift card item overlay
* Refactor to use view transitions for card animations * Cleanup * Add back fade in/out transition for gift card item overlay
2 participants
No description provided.