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.
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
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
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
something to note: I have set witdh to 100% on the children but it's still collapsing.
Here the text will squash just like the content in the video
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