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

是的，适合内容和最大内容不会使您的内容动起来。您必须为最大高度提供一些数值以进行动画处理。它会考虑内容的高度，因此您必须提供大于内容高度的max-height值。

谢谢。