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;
  }
}

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

任何想法？

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

Answer 1

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

谢谢。