Add "auto" class to mean the built-in should run (#32761)
Stacked on https://github.com/facebook/react/pull/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".
Sebastian Markbåge committed
Mar 26, 2025 at 15:02 UTC
fceb0f80bc729d061bcb5031801cfc824adc07a9
1 file changed
+10
-3
packages/react-reconciler/src/ReactFiberViewTransitionComponent.js
+10
-3
@@ -21,10 +21,14 @@ import {getIsHydrating} from './ReactFiberHydrationContext';
21
import {getTreeId} from './ReactFiberTreeContext';
22
23
export type ViewTransitionClassPerType = {
24
- [transitionType: 'default' | string]: 'none' | string,
24
+ [transitionType: 'default' | string]: 'none' | 'auto' | string,
25
};
26
27
-export type ViewTransitionClass = 'none' | string | ViewTransitionClassPerType;
27
+export type ViewTransitionClass =
28
+ | 'none'
29
+ | 'auto'
30
+ | string
31
+ | ViewTransitionClassPerType;
32
33
export type ViewTransitionProps = {
34
name?: string,
@@ -127,7 +131,10 @@ export function getViewTransitionClassName(
131
const className: ?string = getClassNameByType(defaultClass);
132
const eventClassName: ?string = getClassNameByType(eventClass);
133
if (eventClassName == null) {
130
- return className;
134
+ return className === 'auto' ? null : className;
135
+ }
136
+ if (eventClassName === 'auto') {
137
+ return null;
138
}
139
return eventClassName;
140
}