Allow passing an object-as-map for class names to match class based on type

This is more convenient than the CSS form.

Author: sebmarkbage

fixtures/view-transition/src/components/Page.js

@@ -62,6 +62,13 @@ export default function Page({url, navigate}) {
           <ViewTransition className={transitions['slide-on-nav']}>
             <h1>{!show ? 'A' : 'B'}</h1>
           </ViewTransition>
+          <ViewTransition
+            className={{
+              'navigation-back': transitions['slide-right'],
+              'navigation-forward': transitions['slide-left'],
+            }}>
+            <h1>{!show ? 'A' : 'B'}</h1>
+          </ViewTransition>
           {show ? (
             <div>
               {a}

fixtures/view-transition/src/components/Transitions.module.css

@@ -42,6 +42,19 @@
   }
 }
 
+::view-transition-new(.slide-right) {
+  animation: enter-slide-right ease-in 0.25s;
+}
+::view-transition-old(.slide-right) {
+  animation: exit-slide-right ease-in 0.25s;
+}
+::view-transition-new(.slide-left) {
+  animation: enter-slide-left ease-in 0.25s;
+}
+::view-transition-old(.slide-left) {
+  animation: exit-slide-left ease-in 0.25s;
+}
+
 ::view-transition-new(.enter-slide-right):only-child {
   animation: enter-slide-right ease-in 0.25s;
 }

packages/react-reconciler/src/ReactFiberViewTransitionComponent.js

@@ -11,21 +11,30 @@ import type {ReactNodeList} from 'shared/ReactTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {ViewTransitionInstance} from './ReactFiberConfig';
 
-import {getWorkInProgressRoot} from './ReactFiberWorkLoop';
+import {
+  getWorkInProgressRoot,
+  getPendingTransitionTypes,
+} from './ReactFiberWorkLoop';
 
 import {getIsHydrating} from './ReactFiberHydrationContext';
 
 import {getTreeId} from './ReactFiberTreeContext';
 
+export type ViewTransitionClassPerType = {
+  [transitionType: 'default' | string]: 'none' | string,
+};
+
+export type ViewTransitionClass = 'none' | string | ViewTransitionClassPerType;
+
 export type ViewTransitionProps = {
   name?: string,
   children?: ReactNodeList,
-  className?: 'none' | string,
-  enter?: 'none' | string,
-  exit?: 'none' | string,
-  layout?: 'none' | string,
-  share?: 'none' | string,
-  update?: 'none' | string,
+  className?: ViewTransitionClass,
+  enter?: ViewTransitionClass,
+  exit?: ViewTransitionClass,
+  layout?: ViewTransitionClass,
+  share?: ViewTransitionClass,
+  update?: ViewTransitionClass,
   onEnter?: (instance: ViewTransitionInstance, types: Array<string>) => void,
   onExit?: (instance: ViewTransitionInstance, types: Array<string>) => void,
   onLayout?: (instance: ViewTransitionInstance, types: Array<string>) => void,
@@ -82,17 +91,49 @@ export function getViewTransitionName(
   return (instance.autoName: any);
 }
 
+function getClassNameByType(classByType: ?ViewTransitionClass): ?string {
+  if (classByType == null || typeof classByType === 'string') {
+    return classByType;
+  }
+  let className: ?string = null;
+  const activeTypes = getPendingTransitionTypes();
+  if (activeTypes !== null) {
+    for (let i = 0; i < activeTypes.length; i++) {
+      const match = classByType[activeTypes[i]];
+      if (match != null) {
+        if (match === 'none') {
+          // If anything matches "none" that takes precedence over any other
+          // type that also matches.
+          return 'none';
+        }
+        if (className == null) {
+          className = match;
+        } else {
+          className += ' ' + match;
+        }
+      }
+    }
+  }
+  if (className == null) {
+    // We had no other matches. Match the default for this configuration.
+    return classByType.default;
+  }
+  return className;
+}
+
 export function getViewTransitionClassName(
-  className: ?string,
-  eventClassName: ?string,
+  defaultClass: ?ViewTransitionClass,
+  eventClass: ?ViewTransitionClass,
 ): ?string {
+  const className: ?string = getClassNameByType(defaultClass);
+  const eventClassName: ?string = getClassNameByType(eventClass);
   if (eventClassName == null) {
     return className;
   }
   if (eventClassName === 'none') {
     return eventClassName;
   }
-  if (className != null) {
+  if (className != null && className !== 'none') {
     return className + ' ' + eventClassName;
   }
   return eventClassName;

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -698,6 +698,10 @@ export function getPendingPassiveEffectsLanes(): Lanes {
   return pendingEffectsLanes;
 }
 
+export function getPendingTransitionTypes(): null | TransitionTypes {
+  return pendingTransitionTypes;
+}
+
 export function isWorkLoopSuspendedOnData(): boolean {
   return (
     workInProgressSuspendedReason === SuspendedOnData ||