I use transition: height 500ms
to add an animation to an element that slides open via button from height: 0
to height: 100px
and vice versa.
Since the element's content is added dynamically and I don't know it's size I would like to switch to height: fit-content
instead. This way the element would have always the right size to show it's content.
Sadly this disables the animation.
How can I get the animation together with a div element which size fits its content?
Following snippet shows the behavior:
document.querySelector('button')
.addEventListener(
'click',
() => document.querySelectorAll('div')
.forEach(div => div.classList.toggle('closed')));
div {
background-color: lightblue;
border: 1px solid black;
overflow: hidden;
transition: height 500ms;
}
div.closed {
height: 0 !important;
}
div.div1 {
height: 100px;
}
div.div2 {
height: fit-content;
}
<button type="button">toggle</button>
<h1>'height: 100px' => 'height: 0'</h1>
<div class="div1">
some text<br />
even more text<br />
so much text
</div>
<br>
<h1>'height: fit-content' => 'height: 0'</h1>
<div class="div2">
some text<br />
even more text<br />
so much text
</div>
one possible solution, though not perfect, is to animate font-size
instead of height
.
another solution might be to animate max-height
instead of height
. you can use max-height
say 300px or 500px. but if you require more than that, it won't look good.
here I'm animating font-size.
Hope that helps. Thanks.
document.querySelector('button')
.addEventListener(
'click',
() => document.querySelectorAll('div')
.forEach(div => div.classList.toggle('closed')));
div {
background-color: lightblue;
border: 1px solid black;
overflow: hidden;
transition: font-size 500ms;
}
div.closed {
font-size: 0 !important;
}
div.div1 {
font-size: 14px;
}
div.div2 {
font-size: 14px;
}
<button type="button">toggle</button>
<h1>'height: 100px' => 'height: 0'</h1>
<div class="div1">
some text<br />
even more text<br />
so much text
</div>
<br>
<h1>'height: fit-content' => 'height: 0'</h1>
<div class="div2">
some text<br />
even more text<br />
so much text
</div>
As Mishel stated another solution is to use max-height. Here is a working example of that solution.
The key is to approximate your max-height when it is fully expanded, then the transitions will be smooth.
Hope this helps.
https://www.w3schools.com/css/css3_transitions.asp
document.querySelector('button')
.addEventListener(
'click',
() => document.querySelectorAll('div')
.forEach(div => div.classList.toggle('closed')));
div {
background-color: lightblue;
border: 1px solid black;
overflow-y: hidden;
max-height: 75px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(1, 1, 1, 1);
}
div.closed {
max-height: 0;
}
<button type="button">toggle</button>
<h1>'height: 100px' => 'height: 0'</h1>
<div class="div1">
some text<br />
even more text<br />
so much text
</div>
<br>
<h1>'height: fit-content' => 'height: 0'</h1>
<div class="div2">
some text<br />
even more text<br />
so much text
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With