mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian Markbåge
3a5496b3f5
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.](https://github.com/facebook/react/commit/8b91b37bb8b4add5f3f8be5ef8f49bb23966b13b#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.
49 lines
1.3 KiB
JSON
49 lines
1.3 KiB
JSON
{
|
|
"name": "react-fixtures-view-transition",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"devDependencies": {
|
|
"concurrently": "3.1.0",
|
|
"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/",
|
|
"prebuild": "cp -r ../../build/oss-experimental/* ./node_modules/",
|
|
"dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
|
|
"dev:client": "PORT=3001 react-scripts start",
|
|
"dev:server": "NODE_ENV=development node server",
|
|
"start": "react-scripts build && NODE_ENV=production node server",
|
|
"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"
|
|
]
|
|
}
|
|
}
|