0

I have a container as a header of a collapsible dropdown with a max-height of 30px. I'm toggling an ".open" class that changes the max-height to 30000px onClick in Javascript.

I'm trying to add a CSS transition to make this more fluid via transition: 1s; to the container class. The resulting effect is clunky and seems wrong: the div will collapse instantly (no ease-in/out) after a timeout equal to the 1s in the css element. I.e. if I add transition: 5s;, nothing will happen on the page until 5s, then the div will snap closed.

Hope this makes sense, thank you!

-- Sharing code for clarity:

html:

<section class="project">
    <div class="project-head">
       imgs/text with flexbox/grids etc
    </div>
</section>

css:

section.project {
  max-height: 30px;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}
.project-head {
    display: grid;
    height: 50px;
    width: 95vw;
    transition: .01s;
}

.open {
  max-height: 100000px !important;
}

js:

document.querySelectorAll('.project-head').forEach(project => {
    project.addEventListener('click', function () {
      this.parentElement.classList.toggle("open");
    });
})
Labradoodle
  • 1
  • 2
  • Do you want to set `max-height` to `.project-head` or `.project`? Try to set `height` instead of `max-height`. You can toggle `height` between `0` and `auto` – Ali Yaghoubi Oct 20 '21 at 19:14
  • Intention is to set max-height of `.project` by way of the childElement `.project-head` (since most of `.project` is hidden before click). Toggling `height` instead of `max-height` works but produces same no-transition effect. – Labradoodle Oct 20 '21 at 19:39
  • Try to toggle `height` between `0` and `auto` – Ali Yaghoubi Oct 20 '21 at 19:57
  • Tried this -- seems like it's impossible to transition to `height: auto` in CSS? https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css?noredirect=1&lq=1 – Labradoodle Oct 20 '21 at 20:12
  • I Updated it, check it again – Ali Yaghoubi Oct 20 '21 at 20:20
  • Thanks so much for your help - not sure what you mean "Updated it"? Seems the issue of using transition on `height: auto` still stands? – Labradoodle Oct 20 '21 at 20:27
  • Yes, you can transition on max-height, but remember that is what you are doing, you are not transitioning on height. So you've given it say 5seconds to get from a huge max-height to a small one, it will take that time so there's a lot of the max-height lessening going on before you see anything, then there's scarecely any time left for the bit you can see and it looks instant. – A Haworth Oct 20 '21 at 20:42
  • keep `css transition`, then handle `height` by `javascript` – Ali Yaghoubi Oct 21 '21 at 03:54

1 Answers1

0

The code is doing what it has been asked to do - transitioning the max-height from something very big to something pretty small. It's only the last part of that that you will actually see and it looks instant because most of the transition time has been taken up with getting the huge max height down to the actual height of the div.

This snippet demonstrates a mitigation of the problem by putting the max-height to something that is not nearly so high. The outer div is set to have a different color on the smaller max height from the larger one so you can see what is happening:

document.querySelectorAll('.project-head').forEach(project => {
  project.addEventListener('click', function() {
    this.parentElement.classList.toggle("open");
  });
})
section.project {
  max-height: 30px;
  overflow: hidden;
  transition: all 5s ease-in-out;
  background-color: rgba(255, 0, 0, 0.5);
}

.project-head {
  display: grid;
  height: 50px;
  width: 95vw;
  transition: .01s;
}

section.project.open {
  max-height: 100px;
  background-color: cyan;
}
<section class="project">
  <div class="project-head">
    imgs/text with flexbox/grids etc
  </div>
</section>

Now try changing the max-height to something much larger and you will see it's transformation not being so noticable, because mostly it's off screen.

document.querySelectorAll('.project-head').forEach(project => {
  project.addEventListener('click', function() {
    this.parentElement.classList.toggle("open");
  });
})
section.project {
  max-height: 30px;
  overflow: hidden;
  transition: all 5s ease-in-out;
  background-color: rgba(255, 0, 0, 0.5);
}

.project-head {
  display: grid;
  height: 50px;
  width: 95vw;
  transition: .01s;
}

section.project.open {
  max-height: 10000px;
  background-color: cyan;
}
<section class="project">
  <div class="project-head">
    imgs/text with flexbox/grids etc
  </div>
</section>

The expansion seems to be much quicker, and the contraction much slower.

What to do in practice? As you rightly say you can't transition from/to auto so the max-height way is sort of a way round it. There seems to be no way other than choosing a sensible max height that is likely to be just more than the total height you want to expose. This is probably doable for an item in a menu as it will consist of a (very) few lines of text. However if you have lots of images this may be more difficult to judge. I suppose one way would be to get JS to calculate the heights at run time, but that then rather defeats the object of using the max height method.

A Haworth
  • 30,908
  • 4
  • 11
  • 14