CSS过渡与max-height:fit-content不起作用

Question

我正在尝试使用以下CSS对一些可扩展面板进行动画处理：

.panel {
  transition: max-height 0.1s ease-in-out;
  flex: 90;
  max-height: 26px;

  &.expanded {
    max-height: fit-content;
  }
}

问题在于这个过渡效果不起作用。如果我在.expanded中使用一些数字的max-height值，它可以完美地工作。

有什么想法吗？

我读到fit-content、max-content等属性不能进行动画处理。这是真的吗？

- agascon

---

请添加您的HTML代码。谢谢。 - Xenio Gracias

是的，您必须指定一个宽度。 - Amarjit Singh

也许这个链接可以帮到你：https://css-tricks.com/using-css-transitions-auto-dimensions/ - ReSedano

我认为最好的做法是将高度设置为26像素并适应内容，然后将最大高度从26动画到比内容更高的高度。 - Pete

Answer 1

是的，fit-content和max-content不能使您的内容动画。您需要为 max-height 提供一些数字值来实现动画。它会考虑到您的内容所需的高度，因此您需要提供比您的内容高度更大的max-height值。

谢谢。

- KuldipKoradia

---

感谢您的回答。问题在于我想保持fit-content的行为，因此使用数字值并不是一个真正的选择。我将开一个新的问题来解释我想要实现的内容，以保持这个答案的清晰（之前没有找到）：具有非数字值（如fit-content/max-content）的max-height无法进行动画处理。 - agascon

@agascon 你能链接一下你的其他问题吗？我想到的一个方法是：1）从不可见元素（而非消失的元素）开始；2）使用 getBoundingClientRect() 获取内容大小；3）通过应用某些类将元素设置为 height:0;；4）使用返回的高度动态生成 .expanded CSS，或者使用 CSS 变量来设置高度。我可能会粗心地将其设置为 fit-content，并期望浏览器在未来自行处理动画，因为它们可以更快地完成。 - Tin Svagelj

Answer 2

使用视口概念！

&.expanded {
  max-height: fit-content;
}

- rupumped