score:1
i think that css flex
and <collapse />
are not mean to be used in this manner.
<collapse />
itself will set css like width:0px
that your display:flex
will simply ignore.
using csstransition
as an alternative you can create and set the transition rules yourself using the <csstransition />
component.
this is also used by the <collapse/>
internally.
the docs should be helpfull.
example
there is a sandbox example
const usestyles = makestyles({
"slide-enter": {
flexgrow: 0,
width: 0,
overflow: "hidden",
whitespace: "nowrap",
transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
},
"slide-active-enter": {
flexgrow: 1,
width: "auto",
overflow: "hidden",
whitespace: "nowrap",
transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
},
"slide-done-enter": {
flexgrow: 1,
width: "auto",
overflow: "hidden",
whitespace: "nowrap"
},
"slide-exit": {
flexgrow: 1,
width: "auto",
transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
},
"slide-active-exit": {
flexgrow: 0,
width: 0,
overflow: "hidden",
whitespace: "nowrap",
paddingleft: 0,
paddingright: 0,
transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
},
"slide-done-exit": {
flexgrow: 0,
width: 0,
overflow: "hidden",
whitespace: "nowrap",
paddingleft: 0,
paddingright: 0
}
});
.......
<transitiongroup style={{ display: "flex" }}>
{columns.map((_, i) =>
i >= columns.length - 2 ? (
<csstransition
key={i}
timeout={300}
classnames={{
appear: classes["slide-enter"],
appearactive: classes["slide-active-enter"],
appeardone: classes["slide-done-enter"],
enter: classes["slide-enter"],
enteractive: classes["slide-active-enter"],
enterdone: classes["slide-done-enter"],
exit: classes["slide-exit"],
exitactive: classes["slide-active-exit"],
exitdone: classes["slide-done-exit"]
}}
>
<coloredbox>content-{i}</coloredbox>
</csstransition>
) : null
)}
</transitiongroup>
old answer
old answer before clarification from op:
its a bit unclear what you're actually trying to achieve.
why use transition group?
usually a <transistiongroup />
is used to set the in
property on a <collapse/>
automatically. for example when adding a bunch of items in a list.
you would not need to have the <transistiongroup />
if you just want to render 2 columns.
you can pass the in
boolean manually.
styling the collapse.
you can pass styling to the collapse wrapper and set any css you need. ie:
<collapse
in={ison}
orientation="horizontal"
style={{ flex: "1", display: "inline-block" }}
>
example
have a look at this code sandbox
it has 2 examples:
- version 1 that just open/close the columns
- version 2 that adds columns and uses transitiongroup to expand them
i think version 1 is what you're really looking for:
const example1 = () => {
const [ison, setison] = react.usestate(false);
const toggle = () => {
setison((prev) => !prev);
};
return (
<>
<button variant="contained" onclick={toggle}>
{ison ? "collapse" : "expand"}
</button>
<box display="flex">
<collapse
in={ison}
orientation="horizontal"
style={{ flex: "1", display: "inline-block" }}
>
<box>content-a</box>
</collapse>
<collapse
in={ison}
orientation="horizontal"
style={{ flex: "1", display: "inline-block" }}
>
<box>content-b</box>
</collapse>
</box>
</>
);
};
Source: stackoverflow.com
Related Query
- How to make Flexbox work with children when using horizontal MUI Collapse Component and TransitionGroup transitions?
- How to make my custom tab component work with passing index to children and hiding panes?
- How to wrap different components like <ol> with <Typography> when using MDX with MUI (NextJS)
- How can I make error validation work in React Hook Form when using template literal in register function?
- how to make react-hook-form work with multiple forms in one page?
- How do you change a style of a child when hovering over a parent using MUI styles?
- How to test if a component is rendered with the right props when using react-testing-library?
- How to make react router work with static assets, html5 mode, history API and nested routes?
- MUI - How do you make a horizontal List?
- How can I make React Portal work with React Hook?
- How to make Puppeteer work with a ReactJS application on the client-side
- How to make search using "contains" with DynamoDB
- How can I make intro js work with React?
- React Native: How to make format card expiration with / using <TextInput/>?
- How to make the row editable when clicking on an "Edit" button on a cell with react-table
- How to make useRouteMatch work with types from react-router
- How to prevent useCallback from triggering when using with useEffect (and comply with eslint-plugin-react-hooks)?
- How to deal with "Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. " when using react-window to render table rows
- How to get JSDOM to work with typescript when unit testing with a Chai\Mocha setup?
- How to load React-select Async with initial options for edit item function when using a search API?
- How do I get Promises to work when using Jest CLI?
- How to make Auto Slides Per View with dynamic content using Swiper Reactjs
- How to make autofocus on input field when using react-final-form?
- How to use conditional styles with MUI v5 using emotion styled
- Using the MUI DatePicker with yup and react-hook-form - the error prop doesn't work as intended
- How to style SVG <linearGradient> with Tailwind CSS when using `fill="url(#a)"`?
- how can I make a scrollable component that scrolls to the latest children components automatically when I append a child component?
- Why does custom Button component using MUI Button not work on hover with Tooltip?
- How do I make mutliple graphql queries with the same query using react-apollo?
- How to target classes with queryselector when using react-css-modules
More Query from same tag
- Generic filter for X number of properties
- create-react-app is showing all my code in production, how to hide it?
- Is it possible to have local states in container?
- MobX not rerendering React component as used @computed is changed
- Simulate a text input change as if the user had typed a specific key in order to trigger React's onChange handler?
- React - Import Components from select/dropdown
- How do react hooks determine the component that they are for?
- reactjs application - can't get my hello world to show up
- Accessing the Store in Redux?
- React: how to display success message if all requests were successful in a loop
- How to setup VS code debugging in Windows when running WSL?
- how do I display onscroll event only on first scroll?
- How to sync data to AWS DynamoDB using Amplify DataStore?
- js/react: sync call in event handler works, but async call does not
- what is different between set ref in arrow function and set ref direct variable
- Using pretty URLs with react-router?
- Submit a form using Enter key with "@material-ui/core/Button" in react.js
- How can I use sass in my React / webpack project?
- how to redirect react router v6 after login?
- duplicate id in onClick when processed in cycle
- Moving react into seperate component files without Node
- React Sortable Tree - Can I give outside button "Add node" by finding type with tree data?
- Why the map function doesn't work in my React app?
- ReactJS - TypeError: Cannot read property 'raw' of undefined
- Redux/React. TypeError: Cannot call a class as a function
- How to use .env in react js
- NextJS: Error serializing `.data.data` returned from `getServerSideProps`
- Problem when reloading page using react-router-dom
- Next.js sitemap with url paramters
- Unable to get entered data in a rich text editor (react-draft-wysiwyg) included to React component