From fceb0f80bc729d061bcb5031801cfc824adc07a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Wed, 26 Mar 2025 15:02:43 -0400 Subject: [PATCH] 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 `` 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". --- .../src/ReactFiberViewTransitionComponent.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberViewTransitionComponent.js b/packages/react-reconciler/src/ReactFiberViewTransitionComponent.js index 659029fb6b..c4bc3204db 100644 --- a/packages/react-reconciler/src/ReactFiberViewTransitionComponent.js +++ b/packages/react-reconciler/src/ReactFiberViewTransitionComponent.js @@ -21,10 +21,14 @@ import {getIsHydrating} from './ReactFiberHydrationContext'; import {getTreeId} from './ReactFiberTreeContext'; export type ViewTransitionClassPerType = { - [transitionType: 'default' | string]: 'none' | string, + [transitionType: 'default' | string]: 'none' | 'auto' | string, }; -export type ViewTransitionClass = 'none' | string | ViewTransitionClassPerType; +export type ViewTransitionClass = + | 'none' + | 'auto' + | string + | ViewTransitionClassPerType; export type ViewTransitionProps = { name?: string, @@ -127,7 +131,10 @@ export function getViewTransitionClassName( const className: ?string = getClassNameByType(defaultClass); const eventClassName: ?string = getClassNameByType(eventClass); if (eventClassName == null) { - return className; + return className === 'auto' ? null : className; + } + if (eventClassName === 'auto') { + return null; } return eventClassName; }