Animating max-height with CSS transitions


I want to create an expand/collapse animation that’s powered only by classnames (javascript is used to toggle the classnames).

I’m giving one class max-height: 4em; overflow: hidden;

and the other max-height: 255em; (I also tried the value none, which didn’t animate at all)

this to animate: transition: max-height 0.50s ease-in-out;

I used CSS transitions to switch between them, but the browser seems to be animating all those extra em‘s, so it creates a delay in the collapse effect.

Is there a way of doing it (in the same spirit – with css classnames) that doesn’t have that side-effect (I can put a lower pixel count, but that obviously has drawbacks, since it might cut off legit text – that’s the reason for the big value, so it doesn’t cut off legit long text, only ridiculously long ones)

See the jsFiddle – (click on the text container)


In case anyone is reading this, I have not found a solution and went with an expand-only effect (which was achieved by moving the transition style to the expanded class definition)

Answered By – Madd0g

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.