Implement ViewTransition for htmx and tabs #4379
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
frjo
added
Type: Enhancement
frjo
force-pushed
the
enhancement/view-transitions
branch
from
3bbf4ce to
de81b15
Compare
frjo
added
Status: Needs testing
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
We added ViewTransition between page loads in #4359.
You can also add it to any javascript that change things on screen. In this PR I added it to tabs.js. It gives a subtle and nice animations when switching tabs.
htmx has built in support for it and this PR turn it on globally. (I did turn it off for the review modals on submission all, some minor bug made them pop in/out.)
Tested as well to remove all x-transition from modal placeholder and I think ViewTransition looks as good.
Read up on @view-transition her:
https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition
For hands on examples and explanations see https://www.youtube.com/watch?v=quvE1uu1f_I