'height: fit-content' 没有 CSS 转换

Question

我使用 transition: height 500ms 向通过按钮从 height: 0 到 height: 100px 滑动打开的元素添加动画，反之亦然。

由于元素的内容是动态添加的，我不知道它的大小，所以我想改用 height: fit-content。这样元素将始终具有正确的大小来显示其内容。

遗憾的是，这会禁用动画。

如何将动画与尺寸适合其内容的 div 元素结合在一起？

以下代码段显示了行为：

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>

Answer 1

一个可能的解决方案，虽然不完美，但动画 font-size 而不是 height。

另一个解决方案可能是动画 max-height 而不是 height。您可以使用 max-height 表示 300px 或 500px。但如果你要求的不止于此，它就不好看了。

我在这里设置字体大小动画。

希望对您有所帮助。谢谢。

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>

Answer 2

正如 Mishel 所说，另一种解决方案是使用最大高度。这是该解决方案的一个工作示例。

关键是在完全展开时接近您的最大高度，然后过渡会很平滑。

希望这对您有所帮助。

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>

'height: fit-content' 没有 CSS 转换

No CSS transition for 'height: fit-content'

css

animation

transition

slide

css-transitions