CSS 过渡不适用于 max-height: fit-content

我正在尝试使用 CSS 为一些可扩展面板设置动画，如下所示：

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

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

问题是这种转变不起作用。如果我使用一些数字max-height值在.expanded，它工作完美。

任何想法？

我读到了fit-content, max-content, ... 不可设置动画。是这样吗？

是的， fit-content 和 max-content 不会为您的内容添加动画效果。您必须为动画的最大高度提供一些数值。它会考虑内容所需的高度，因此您必须提供大于内容高度的 max-height 值。

谢谢。