View Transition Class Names based on event kind - #32050
Merged
Merged
Conversation
facebook-github-bot
added
CLA Signed
React Core Team
|
Comparing: 540efebcc34357c98412a96805bfd9244d6aa678...6cd24654d6a88c76644a2dffbc99087355144b6f Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show |
sebmarkbage
force-pushed
the
viewtransitionclass
branch
from
January 13, 2025 05:51
93086b5 to
a8fde3b
Compare
"none" is a special value that deactivates the view transition name under that condition.
sebmarkbage
force-pushed
the
viewtransitionclass
branch
from
January 13, 2025 06:15
a8fde3b to
29003b5
Compare
eps1lon
approved these changes
Jan 13, 2025
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
This adds five props to
<ViewTransition>that adds a specificview-transition-classwhen React wants to animate it based on the heuristic that triggers.enter: The or its parent Component is mounted and there's no other with the same name being deleted.exit: The or its parent Component is unmounted and there's no other with the same name being deleted.layout: There are no updates to the content inside this boundary itself but the boundary has resized or moved due to other changes to siblings.share: This is being mounted and another instance with the same name is being unmounted elsewhere.update: The content of has changed either due to DOM mutations or because an inner child has resized.The existing
classNameis the baseline and the others are added to it to combine.This is convenient to distinguish things like
enter/exitbut that can already be expressed as CSS. The other cases can't be expressed as purely CSS."none"is a special value that deactivates the view transition name under that condition.The most important feature of this is that you can now limit View Transitions to only tigger when a particular DOM node is affected, not when just any child updates, by opt-ing out a subtree. This is safer when added to shared parent.
This can't be fully expressed using neither just CSS nor the imperative refs API since we need some way to have already removed the
view-transition-namewhen this happens. When you think about the implementation details it might seem a bit strange that you specify theclasstononeto remove thenamebut it's really about picking which animation should happen for that case default (undefined), a specific one (class) or none ("none").