Animating based on column size

[andrewpaulinoev]

Hi, I had a curious question if this was possible in tailwind alone.

I am using React and basically what I am trying to do is animate based on clicking a button which will call on a ternary

<button onClick={() => setExpand(true)} />

<div className={` ${expand ? 'col-span-8' : 'col-span-3'}`} > </div>

Basically when you click the button it expands the div, it works; but the animation is janky and sudden, is there a way I can ease it out for example; I know it is a little weird since it is basically animating a conditional grid. Thank you

[Rosenbaummm]

It snaps between the two sizes as if transition had never been set. reflow for every stage of that animation, to determine how all the other elements should move. these two states will neatly “squish” the element to and from its natural, content-based size. This stuff matters! .container { display: flex; flex-direction: column;
tellpopeyes.com

[andrewpaulino]

Are you saying to revert to flex box instead of using the grid. I would say that the proportion matters for me, and rather have the grid calculate the width for the elements I suppose. @Rosenbaummm