Height not animating when using percentages

Asked Jun 03 '18 at 22:42

Active Jun 03 '18 at 23:03

Viewed 46 times

I want to make a box expand when it is clicked, which I've achieved. But the transition effect does not work if I use percentage for height, even though the transition work when defined in pixels.

I saved a snippet of the site in this codepen: https://codepen.io/anon/pen/JZGWBW

this works:

function height(ev, thisElement){
    thisElement.style.height = "200px";
}

this does not:

function height(ev, thisElement){
    thisElement.style.height = "100%";
}

Any ideas as to why this happens?

edited Jun 03 '18 at 22:46

asked Jun 03 '18 at 22:42

Dennis Wenger

Right, because you need specific values when using transitions like this. – Geuis Jun 03 '18 at 22:47
So should I use animations instead to achieve the effect? – Dennis Wenger Jun 03 '18 at 22:49
You should read this: https://css-tricks.com/using-css-transitions-auto-dimensions. A few seconds of googling would have brought you to the same page. – Geuis Jun 03 '18 at 22:53
Thank you. Googled but must have used bad keywords. – Dennis Wenger Jun 03 '18 at 22:55
I tried it with pecentage seem to be working – Friday Ameh Jun 03 '18 at 22:56
@FridayAmeh Oh, what browser? – Dennis Wenger Jun 03 '18 at 23:00
1

@Geuis Using the first technique on the link you provided gave me the desired effect. – Dennis Wenger Jun 03 '18 at 23:04
If what you want is to collapse your container to 100% you can try function height(ev, thisElement){ thisElement.style.height = thisElement.scrollHeight+"px"; } If you want to add little more margin bottom you can add the desired pixels. – Facundo Larrosa Jun 03 '18 at 23:08

Height not animating when using percentages

0 Answers0