score:1
Accepted answer
this should work:
<grid container direction="row">
<grid classname="right" id="b" item lg={show ? 12 : 9}>{'otherchildren'}</grid>
<grid classname={show? "left left-hide" : "left"} id="a" item lg={3}>{'children'}</grid>
</grid>
css
.right {
transition: ease 0.5s;
}
.left {
transition: ease 0.5s;
overflow: hidden;
}
.left-hide {
flex-basis: 0% !important;
}
Source: stackoverflow.com
Related Query
- Make a MUI v4 Grid element appear with CSS transition?
- cant array.map with css grid to make table for dynamic data
- How to make CSS grid working in react with CSS modules stylesheet
- CSS pseudo selectors with MUI
- MUI - How can I style the scrollbar with CSS in JS?
- Horizontal scroll with css grid
- How do you use CSS grid layouts with React effectively?
- Element values shifting and changing before transition with react-transition-group
- How to make a Semantic UI React grid full screen with different row heights?
- Staggering components on enter with react css transition group
- How to make a Material UI grid element sticky?
- react, css) transition css for fade in and out, when background image is changed with className
- Make two grid items for Material-UI both same height with Flex-box
- Nextjs - Styling nested element with css modules
- CSS Transition flash on page load with NextJS production build
- CSSTransition to make a slide out drawer in css grid layout
- How to randomly make appear one by one images from a map with fade?
- css - how to use grid with different number of item in a row
- How to use multiple CSS classes with MUI 5 SX prop?
- make first column sticky in react table with only CSS
- How to add a CSS class to an element with React function components
- css transition changing class with pseudoelement
- How to transition scenes with clouds in css js
- How do I transition background color with Tailwind CSS in React?
- How to make assertions on element passed down as property with Enzyme?
- Show transition with css in React
- How to make 3 column grid with map function react
- How to make div elements appear inline with a flex direction of column?
- Shared element route transition with framer-motion and NextJS (typescript)
- React - make input appear with text selected
More Query from same tag
- React formik Validation Error Api Renders Every Time when other field validate
- react is not re-rendering component inside array.map, when state of array changes
- Mutating state from React's useState hook
- Gatsby + Contentful URL Structure Problems
- How to fix violetion took 200ms when scrolling a block with message loading?
- React and Redux: Are there any performance issues/possible side effects with passing a parent component as a prop to its children
- React Router : Router one component exact other non exact
- CSS - animations for a carousel of multiple items
- React useState being ignored
- React tab doesn't appear in chrome developer tools
- Continuous Rendering even when value does not change
- Type is not assignable to type 'IntrinsicAttributes
- How do i get refs value from dynamically generated array in React
- How to fix type issue for conditional rendering?
- RazorPay Integration with React JS and Java application
- How to change the inputted text's style inside an input element using Styled Components - React
- React setState race conditions
- Antd Multi Select Clear Button
- How do you pass custom properties to TypeScript + StyledCompoments?
- How to import makeStyles from mui?
- I want to Redirect a page with get api id onclick button in bootstrap react table2
- React: Resizing a div including handlers, different cursors i.e ns-resize - no jquery
- .map is not returning the values(not a function)
- React setState and use the value to update another state
- Subscribing to a redux action in a react component
- React.js useRef / createRef current is always null scrolling
- How to Fix Heroku Application Error For a Successfully Deployed React App
- Wrong location of marker when rendered in component
- React map object and embedded object from JSON and convert to single array for state
- ReactJS: What is the correct way to set a state value as array?