CSS 最大高度转换不适用于 Javascript 类切换

Question

我有一个容器作为最大高度为 30 像素的可折叠下拉列表的标题。我正在切换一个“.open”类，在 Javascript 中将最大高度更改为 30000px onClick。

我正在尝试添加一个 CSS 过渡，以通过 transition: 1s; 使其更加流畅。到容器类。产生的效果很笨拙并且似乎是错误的：在超时等于 css 元素中的 1s 之后，div 将立即折叠（没有缓入/缓出）。 IE。如果我添加transition: 5s;，在5s之前页面上不会发生任何事情，然后div会自动关闭。

希望这是有道理的，谢谢！

-- 为清楚起见共享代码：

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");
    });
})

Answer 1

代码正在做它被要求做的事情 - 将最大高度从非常大的东西转换为非常小的东西。这只是您实际看到的最后一部分，它看起来是即时的，因为大部分过渡时间都用于将巨大的最大高度降低到 div 的实际高度。

这个 sn-p 演示了通过将最大高度设置为不太高的东西来缓解问题。外部 div 设置为在较小的最大高度上与较大的具有不同的颜色，这样您就可以看到发生了什么：

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>

现在尝试将最大高度更改为更大的值，您会发现它的转换不那么明显，因为它大多不在屏幕上。

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>

扩张似乎要快得多，而收缩要慢得多。

在实践中该怎么做？正如你所说的那样，你不能从/到自动转换，所以最大高度方式是一种绕过它的方式。除了选择一个合理的最大高度外，似乎别无他法，它可能刚好超过您想要暴露的总高度。这对于菜单中的项目可能是可行的，因为它将由（非常）几行文本组成。但是，如果您有很多图像，这可能会更难判断。我想一种方法是让 JS 在运行时计算高度，但这反而违背了使用最大高度方法的目标。