Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
5 replies
nookayisee

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>


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.
Was this page helpful?