Is it possible to animate components based on layout changes as opposed to change in CSS value?

My flex container has two flex item. I am hiding the left flex item on the click event but when this happens, I would like the right component to animate when it takes the entire space of the flex container. Right now, it just snaps into place instead of doing an expanding animation.
<Box sx={{ display: 'flex', border: 'solid red 3px', width: '100%' }}>

{areSettingsVisible && <Box sx={{ width: '100%', backgroundColor: 'blue' }}> hello</Box>}

<Box sx={{ width: '100%', backgroundColor: 'red', transition: 'all 2s' }}> hi</Box>

</Box>
<Box sx={{ display: 'flex', border: 'solid red 3px', width: '100%' }}>

{areSettingsVisible && <Box sx={{ width: '100%', backgroundColor: 'blue' }}> hello</Box>}

<Box sx={{ width: '100%', backgroundColor: 'red', transition: 'all 2s' }}> hi</Box>

</Box>
In a way, because left components got yanked form the DOM, the right component should animate because the layout has changed but CSS values remain the same for the right component.
4 Replies
MarkBoots
MarkBoots9mo ago
you could do it by not removing it from the dom but setting the width to 0 with an overflow hidden; or instead of width, set flex:1 to flex 0 here an example https://codepen.io/MarkBoots/pen/PoLVgJr
o_O
o_O9mo ago
sorry missed your message. I didn't get a notification for it for some reason... but yea i have two issues with this. 1. content squash as seen in the video 2. performence. I read somewhere that animating width and height is a bad idea due to the hit the app perfomece will take
o_O
o_O9mo ago
something to note: I have set witdh to 100% on the children but it's still collapsing.
<Box sx={{ overflow: 'hidden', width: areSettingsVisible ? '100%' : '0%', transition: 'width 0.2s' }} >
<Box sx={{ background: 'red', width: '100%' }}>
Hello world Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa
</Box>
</Box>

<Box sx={{ width: '100%' }} >
<Grid ref={scope} />
</Box>
<Box sx={{ overflow: 'hidden', width: areSettingsVisible ? '100%' : '0%', transition: 'width 0.2s' }} >
<Box sx={{ background: 'red', width: '100%' }}>
Hello world Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa
</Box>
</Box>

<Box sx={{ width: '100%' }} >
<Grid ref={scope} />
</Box>
Here the text will squash just like the content in the video
MarkBoots
MarkBoots9mo ago
the only other thing i can think of is animating the margin-left of the left box to -100%. that won't squash the content iv'e updated the pen
Want results from more Discord servers?
Add your server