Max-height transition from 0 to auto or none?

Question

I have an element with a max-height of 0. I want to transition it to no max-height auto or none; whatever makes it expand based on the number of elements present. I don't want to use JS nor flex, yet.

Here's the jsfiddle: https://jsfiddle.net/m9pd8bjh/19/

HTML:

<nav>
  <input type="checkbox" id="menu-main-checkbox" hidden>
  <label class="toggler" for="menu-main-checkbox">Menu</label>
  <div class="hide toggleable">
    <ul>
      <li>Home</li>
      <li>Sample Page</li>
    </ul>
  </div>
</nav>

CSS:

.hide {
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
}

input[type=checkbox]:checked~.toggleable {
  visibility: visible;
  max-height: 68px;
}

.toggleable {
  transition: visibility 1.5s ease-in-out, max-height .75s ease-in-out;
}

.toggler {
  cursor: pointer
}

nav {
  background: #e74c3c;
}

When I set the max-height to 68px (the height fitting two list items) it works perfectly, but when I set the max-height to 500px, for example, leaving room for future list items, it takes time to transition from 500 to 0, making it give a delay before the list items disappear again.

I do not wish to use scaling as it complicates it and I have to come up with a solution to solve the spacing under it. It keeps the spacing under the element and reserves it for when it opens out.

Possible duplicate of [How can I transition height: 0; to height: auto; using CSS?](http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) — dippas, May 25 '16 at 13:27
@dippas the solution in the possible duplicate says to set the height to a big number, which is what I'm doing. I just need a solution besides that. The problem is in how it transitions, not if it works or not. Please ask me what's confusing about my question if it's not clear enough, or feel free to edit to make it easier to understand. — yaserso, May 25 '16 at 13:29
you have 42 answers, look it up and test it, I just saw at first glance one using `scale` — dippas, May 25 '16 at 13:31
@Shaggy still gives a slight delay if it's bigger than the actual height. Try closing the menu and you'll see what I'm trying to get at. — yaserso, May 25 '16 at 13:33
Possible duplicate of [Unwanted CSS delay when setting transition duration](http://stackoverflow.com/questions/37390315/unwanted-css-delay-when-setting-transition-duration) — Sunil Gehlot, May 25 '16 at 13:47
@SunilGehlot that question is answered, as the problem turned out that I have to come up with a smaller max-height. That only brought my attention to another problem, which this question addresses. That question's answer is not the solution to this question. — yaserso, May 25 '16 at 13:56

score 1 · Accepted Answer · answered May 25 '16 at 14:17

One workaround what I found was to use animation with @keyframes. Remember to add vendor-prefixes.

Browser support for this is the following: Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+

I modified your CSS to this:

 .hide {
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
}

input[type=checkbox]:checked~.toggleable {
  visibility: visible;
  animation: height1 .75s forwards;
}
input[type=checkbox]:not(:checked)~.toggleable {
  visibility: visible;
  animation: height2 .50s forwards;
}

.toggleable {
  transition: visibility 1.5s ease-in-out;
}

.toggler {
  cursor: pointer
}

nav {
  background: #e74c3c;
}
@keyframes height1 {
  0%   { max-height: 0; }
  100% { max-height: 500px; }
}
@keyframes height2 {
  0%   { max-height: 500px; }
  100% { max-height: 0; }
}

If used like this there will be smaller delay when clicking again.

Here is the updated jsfiddle: https://jsfiddle.net/m9pd8bjh/25/

To fix delay use transition: `visibility 0.5s cubic-bezier(0, 1, 0, 1);` for animation from 500px to 0; — egor.xyz, Aug 23 '16 at 14:30

Max-height transition from 0 to auto or none?

1 Answers1