How to animate transition a box height which set to auto

Tell us what’s happening:

I’ve been wondering how to animate the height transition for the container. I did some research but gained nothing close to solve my request. So I thought maybe you guys can help if I ask here.

Any clue to animate the height of the container?
-The height is set to auto, it resizes according to number of the quote lines.
-Am writing in React.js right now, but if you know how to do it in css transition I’d still be glad.

Thanks before^^

Challenge: Build a Random Quote Machine

Link to the challenge:

I think one of the answers to this stackoverflow question will answer your question. Check it out.

1 Like

I’ve checked this one tho, the max height, scaleY, etc. seems doesn’t work because the box height is according to how long the quote is. Hardcode for each quote is not an option, soooo I’m looking for alternatives.

This thread solves only for collapsible element (i’m probably mistaken tho). Because the collapsible transition animates from height: auto to height: 0 and vice versa. Meanwhile what I’m trying to achieve is from heigh: auto to height: auto (according to the quotes length).

But hey thanks for sharing^^

1 Like

I shared that link mainly because of this specific answer:

“You can’t currently animate on height when one of the heights involved is auto , you have to set two explicit heights.” robertc

I was hoping you would land on it. What you are doing is not possible but there are plenty of workarounds in that thread.

1 Like

As you need two numeric values for the heights, you could get those values with JavaScript: myElement.clientHeight

2 Likes