[Fiber] Use className on <ViewTransition> to assign view-transition-class (#31999)

Stacked on #31975.

This is the primary way we recommend styling your View Transitions since
it allows for reusable styling such as a CSS library specializing in
View Transitions in a way that's composable and without naming
conflicts. E.g.

```js
<ViewTransition className="enter-slide-in exit-fade-out update-cross-fade">
```

This doesn't change the HTML `class` attribute. It's not a CSS class.
Instead it assign the `view-transition-class` style prop of the
underlying DOM node while it's transitioning.

You can also just use `<div style={{viewTransitionClass: ...}}>` on the
DOM node but it's convenient to control the Transition completely from
the outside and conceptually we're transitioning the whole fragment. You
can even make Transition components that just wraps existing components.
`<RevealTransition><Component /></RevealTransition>` this way.

Since you can also have multiple wrappers for different circumstances it
allows React's heuristics to use different classes for different
scenarios. We'll likely add more options like configuring different
classes for different `types` or scenarios that can't be described by
CSS alone.

## CSS Modules

```js
import transitions from './transitions.module.css';

<ViewTransition className={transitions.bounceIn}>...</ViewTransition>
```

CSS Modules works well with this strategy because you can have globally
unique namespaces and define your transitions in the CSS modules as a
library that you can import. [As seen in the fixture
here.](8b91b37#diff-b4d9854171ffdac4d2c01be92a5eff4f8e9e761e6af953094f99ca243b054a85R11)

I did notice an unfortunate bug in how CSS Modules (at least in Webpack)
generates class names. Sometimes the `+` character is used in the hash
of the class name which is not valid for `view-transition-class` and so
it breaks. I had to rename my class names until the hash yielded
something different to work around it. Ideally that bug gets fixed soon.

## className, rly?

`className` isn't exactly the most loved property name, however, I'm
using `className` here too for consistency. Even though in this case
there's no direct equivalent DOM property name. The CSS property is
named `viewTransitionClass`, but the "viewTransition" prefix is implied
by the Component it is on in this case. For most people the fact that
this is actually a different namespace than other CSS classes doesn't
matter. You'll most just use a CSS library anyway and conceptually
you're just assigning classes the same way as `className` on a DOM node.

But if we ever rename the `class` prop then we can do that for this one
as well.

Author: sebmarkbage

fixtures/view-transition/package.json

@@ -4,15 +4,23 @@
   "private": true,
   "devDependencies": {
     "concurrently": "3.1.0",
-    "http-proxy-middleware": "0.17.3",
-    "react-scripts": "0.9.5"
+    "http-proxy-middleware": "3.0.3",
+    "react-scripts": "5.0.1",
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11"
   },
   "dependencies": {
+    "@babel/register": "^7.25.9",
     "express": "^4.14.0",
     "ignore-styles": "^5.0.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
   "scripts": {
     "predev": "cp -r ../../build/oss-experimental/* ./node_modules/",
     "prestart": "cp -r ../../build/oss-experimental/* ./node_modules/",
@@ -24,5 +32,17 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

fixtures/view-transition/server/index.js

@@ -1,9 +1,9 @@
 require('ignore-styles');
-const babelRegister = require('babel-register');
+const babelRegister = require('@babel/register');
 const proxy = require('http-proxy-middleware');
 
 babelRegister({
-  ignore: /\/(build|node_modules)\//,
+  ignore: [/\/(build|node_modules)\//],
   presets: ['react-app'],
 });
 
@@ -37,9 +37,10 @@ app.use(express.static(path.resolve(__dirname, '..', 'build')));
 if (process.env.NODE_ENV === 'development') {
   app.use(
     '/',
-    proxy({
+    proxy.createProxyMiddleware({
       ws: true,
-      target: 'http://localhost:3001',
+      changeOrigin: true,
+      target: 'http://127.0.0.1:3001',
     })
   );
 }

fixtures/view-transition/server/render.js

@@ -11,7 +11,7 @@ if (process.env.NODE_ENV === 'development') {
     // 'main.css': '',
   };
 } else {
-  assets = require('../build/asset-manifest.json');
+  assets = require('../build/asset-manifest.json').files;
 }
 
 export default function render(url, res) {

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

@@ -8,6 +8,8 @@ import React, {
 
 import './Page.css';
 
+import transitions from './Transitions.module.css';
+
 const a = (
   <div key="a">
     <ViewTransition>
@@ -24,6 +26,17 @@ const b = (
   </div>
 );
 
+function Component() {
+  return (
+    <ViewTransition
+      className={
+        transitions['enter-slide-right'] + ' ' + transitions['exit-slide-left']
+      }>
+      <p>Slide In from Left, Slide Out to Right</p>
+    </ViewTransition>
+  );
+}
+
 export default function Page() {
   const [show, setShow] = useState(false);
   useEffect(() => {
@@ -72,6 +85,7 @@ export default function Page() {
               <div>!!</div>
             </ViewTransition>
           </Activity>
+          {show ? <Component /> : <p>&nbsp;</p>}
         </div>
       </ViewTransition>
     </div>

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

@@ -0,0 +1,28 @@
+@keyframes enter-slide-right {
+  0% {
+    opacity: 0;
+    translate: -200px 0;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes exit-slide-left {
+  0% {
+    opacity: 1;
+    translate: 0 0;
+  }
+  100% {
+    opacity: 0;
+    translate: 200px 0;
+  }
+}
+
+::view-transition-new(.enter-slide-right):only-child {
+  animation: enter-slide-right ease-in 0.25s;
+}
+::view-transition-old(.exit-slide-left):only-child {
+  animation: exit-slide-left ease-in 0.25s;
+}