First Transition not working because initial height is not set

Question

I am working with a <div>in a Webapp which is minimizable via a toggle button. Pressing the button changes the height of the <div> which works fine and uses transition: .4s;.

The Problem is: The First time the button is pressed, the height changes sudden and without any transition. The other pressed work just fine. This is because the height of the <div> is not initially set, but min-height, max-height are. So I've tried, when the button gets pressed the first time, to get the height of the div via javaScript and then just set the height to this. Sadly, the transition still doesn't work the first time.

I'm using Polymer btw.

I hope you got some tips, thanks in advance!

possible duplicate of : https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — Temani Afif, Jun 08 '18 at 11:04

score 0 · Answer 1 · answered Jun 08 '18 at 11:14

0

Maybe you can try to animate max-height and not height.

So you dont have to get the initial height via JS.

answered Jun 08 '18 at 11:14

christian wuensche

963
6
21

First Transition not working because initial height is not set

1 Answers1