Kevin Powell - Community•10mo ago

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•10mo 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_OOP•10mo 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_OOP•10mo 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•10mo 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

Gaming

Programming

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