14

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>
Sebastian Barth
  • 3,635
  • 6
  • 36
  • 52
  • fit-content is actually a function which IIRC is not an animate-able value. – TylerH Sep 14 '18 at 18:49
  • There's no elegant pure CSS solution, jQuery can solve it with ease (.slideToggle()). – VXp Sep 14 '18 at 19:04
  • 2
    Possible duplicate of [How can I transition height: 0; to height: auto; using CSS?](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) – VXp Sep 14 '18 at 19:06

2 Answers2

5

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>
Mishel Tanvir Habib
  • 974
  • 9
  • 15
  • I indeed used this method for another situation where the content were elements itself: As you are scaling the text element I scaled the child elements. Thanks for the reminder! – Sebastian Barth Sep 14 '18 at 21:20
  • Works perfectly for my dropdown menus of various heights. Thanks! – Zhiyong Jul 14 '20 at 18:18
4

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>
Roskow
  • 140
  • 7