没有针对“高度:适合内容”的CSS过渡

时间:2018-09-14 17:52:11

标签: css animation css-transitions transition slide

我使用transition: height 500ms向元素中添加动画,该元素通过按钮从height: 0height: 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>

1 个答案:

答案 0 :(得分:3)

一种可行的解决方案(虽然不完美)是使font-size而不是height动画。

另一种解决方案可能是对max-height而不是height进行动画处理。您可以使用max-height说300像素或500像素。但是如果您需要的更多,它看起来就不好了。

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

希望有帮助。谢谢。

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>