'height: fit-content' 没有 CSS 过渡 [英] No CSS transition for 'height: fit-content'

问题描述

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

由于元素的内容是动态添加的，我不知道它的大小，我想切换到 height: fit-content 代替.这样，元素将始终具有合适的大小来显示其内容.

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

如何将动画与大小适合其内容的 div 元素结合在一起?

以下代码段显示了行为:

document.querySelector('button').addEventListener('点击'，() =>document.querySelectorAll('div').forEach(div => div.classList.toggle('closed')));

div {背景颜色:浅蓝色；边框:1px纯黑色；溢出:隐藏；过渡:高度500ms；}div.关闭{高度:0！重要；}div.div1 {高度:100px；}div.div2 {高度:适合内容；}

<button type="button">toggle</button><h1>'高度:100px' =>'高度:0'<div class="div1">一些文字<br/>更多文字<br/>这么多文字

<br><h1>'height: fit-content' =>'高度:0'<div class="div2">一些文字<br/>更多文字<br/>这么多文字

解决方案

正如 Mishel 所说，另一个解决方案是使用 max-height.这是该解决方案的一个工作示例.

关键是在完全展开时近似于您的最大高度，然后过渡将变得平滑.

希望这会有所帮助.

https://www.w3schools.com/css/css3_transitions.asp

document.querySelector('button').addEventListener('点击'，() =>document.querySelectorAll('div').forEach(div => div.classList.toggle('closed')));

div {背景颜色:浅蓝色；边框:1px纯黑色；溢出-y:隐藏；最大高度:75px；/* 近似最大高度 */过渡属性:全部；过渡持续时间:0.5s；过渡时间函数:cubic-bezier(1, 1, 1, 1);}div.关闭{最大高度:0；}

<button type="button">toggle</button><h1>'高度:100px' =>'高度:0'<div class="div1">一些文字<br/>更多文字<br/>这么多文字

<br><h1>'height: fit-content' =>'高度:0'<div class="div2">一些文字<br/>更多文字<br/>这么多文字

I use transition: height 500ms to add an animation to an element that slides open via button from height: 0 to height: 100px and vice versa.

Since the element's content is added dynamically and I don't know it's size I would like to switch to height: fit-content instead. This way the element would have always the right size to show it's content.

Sadly this disables the animation.

How can I get the animation together with a div element which size fits its content?

Following snippet shows the behavior:

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>

解决方案

As Mishel stated another solution is to use max-height. Here is a working example of that solution.

The key is to approximate your max-height when it is fully expanded, then the transitions will be smooth.

Hope this helps.

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 过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！