Rename <ViewTransition className="..."> to <ViewTransition default="..."> #32734
+40
−25
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
github-actions
bot
added
the
React Core Team
|
Comparing: a5297ec...f50e9de 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
renameclassname
branch
from
b9b8782 to
e7d7fcb
Compare
sebmarkbage
force-pushed
the
renameclassname
branch
from
e7d7fcb to
f50e9de
Compare
jackpope
approved these changes
Mar 26, 2025
sebmarkbage
added a commit
that referenced
this pull request
Mar 26, 2025
Stacked on #32734 In React a ViewTransition class of `"none"` doesn't just mean that it has no class but also that it has no ViewTransition name. The default (`null | undefined`) means that it has no specific class but should run with the default built-in animation. This adds this as an explicit string called `"auto"` as well. That way you can do `<ViewTransition default="foo" enter="auto">` to override the "foo" just for the "enter" trigger to be the default built-in animation. Where as if you just specified `null` it would be like not specifying enter at all which would trigger "foo".
github-actions bot
pushed a commit
that referenced
this pull request
Mar 26, 2025
….."> (#32734) It was always confusing that this is not a CSS class but a view-transition-class. The `className` sticks out a bit among its siblings `enter`, `exit`, `update` and `share`. The idea is that the most specific definition override is the class name that gets applied and this prop is really just the fallback, catch-all or "any" that is applied if you didn't specify a more specific one. It has also since evolved not just to take a string but also a map of Transition Type to strings. The "class" is really the type of the value. We could add a suffix to all of them like `defaultClass`, `enterClass`, `exitClass`, `updateClass` and `shareClass`. However, this doesn't necessarily make sense with the mapping of Transition Type to string. It also makes it a bit too DOM centric. In React Native this might still be called a "class" but it might be represented by an object definition. We might even allow some kind of inline style form for the DOM too. Really this is about picking which "animation" that runs which can be a string or instance. "Animation" is too broad because there's also a concept of a CSS Animation and these are really sets of CSS animations (group, image-pair, old, new). It could maybe be `defaultTransition`, `enterTransition`, etc but that seems unnecessarily repetitive and still doesn't say anything about it being a class. We also already have the name "default" in the map of Transition Types. In fact you can now specify a default for default: ``` <ViewTransition default={{"navigation-back": "slide-out", "default": "fade-in"}}> ``` One thing I don't like about the name `"default"` is that it might be common to just apply a named class that does it matching to enter/exit/update in the CSS selectors (such as the `:only-child` rule) instead of doing that mapping to each one using React. In that can you end up specifying only `default={...}` a lot and then what is it the "default" for? It's more like "all". I think it's likely that you end up with either "default" or the specific forms instead of both at once. DiffTrain build for [e0c99c4](e0c99c4)
github-actions bot
pushed a commit
that referenced
this pull request
Mar 26, 2025
Stacked on #32734 In React a ViewTransition class of `"none"` doesn't just mean that it has no class but also that it has no ViewTransition name. The default (`null | undefined`) means that it has no specific class but should run with the default built-in animation. This adds this as an explicit string called `"auto"` as well. That way you can do `<ViewTransition default="foo" enter="auto">` to override the "foo" just for the "enter" trigger to be the default built-in animation. Where as if you just specified `null` it would be like not specifying enter at all which would trigger "foo". DiffTrain build for [fceb0f8](fceb0f8)
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.
It was always confusing that this is not a CSS class but a view-transition-class.
The
classNamesticks out a bit among its siblingsenter,exit,updateandshare. The idea is that the most specific definition override is the class name that gets applied and this prop is really just the fallback, catch-all or "any" that is applied if you didn't specify a more specific one.It has also since evolved not just to take a string but also a map of Transition Type to strings.
The "class" is really the type of the value. We could add a suffix to all of them like
defaultClass,enterClass,exitClass,updateClassandshareClass. However, this doesn't necessarily make sense with the mapping of Transition Type to string. It also makes it a bit too DOM centric. In React Native this might still be called a "class" but it might be represented by an object definition. We might even allow some kind of inline style form for the DOM too. Really this is about picking which "animation" that runs which can be a string or instance. "Animation" is too broad because there's also a concept of a CSS Animation and these are really sets of CSS animations (group, image-pair, old, new). It could maybe bedefaultTransition,enterTransition, etc but that seems unnecessarily repetitive and still doesn't say anything about it being a class.We also already have the name "default" in the map of Transition Types. In fact you can now specify a default for default:
One thing I don't like about the name
"default"is that it might be common to just apply a named class that does it matching to enter/exit/update in the CSS selectors (such as the:only-childrule) instead of doing that mapping to each one using React. In that can you end up specifying onlydefault={...}a lot and then what is it the "default" for? It's more like "all". I think it's likely that you end up with either "default" or the specific forms instead of both at once.