I'm working on a modal component that pops up with a form for inputting data. Alongside the form, another component should appear under certain conditions (like fetching data successfully). I want the entire card containing these elements to smoothly expand horizontally on desktop or vertically on mobile when the second component shows, gradually reducing the width of the first box during the transition.
To achieve this effect, I initially tried using MUI Grid Container and Grid items, but encountered issues where the second item ended up on a new line or positioned to the right without affecting the overall size of the modal card.
This is the style applied to the modal card:sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
display: 'flex',
flexDirection: 'column',
transitionDuration: '500ms',
minWidth: '30%'
}}
Thinking of a workaround, I attempted wrapping the two components in a DIV element and applying custom CSS to leverage transition effects. However, I couldn't get it to work as expected.
Here's the style applied to the wrapper DIV:<div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
This is the div containing the form grid container (1):<div
style={{
flexGrow: 1,
minWidth: '30%',
transitionDuration: '500ms',
transitionTimingFunction: 'ease-out'
}}
>
This is the div holding the component displayed when the condition is met (2): <div
style={{
paddingLeft: 10,
transitionDuration: '500ms',
transitionTimingFunction: 'ease-in',
whiteSpace: 'nowrap',
minWidth: condition ? '200px' : '0%',
width: '0%'
}}
>
If anyone could provide guidance on how to make this CSS transition work seamlessly, I would greatly appreciate it. As a newcomer to CSS, any help is welcome!
Thank you