Html 如何在手风琴上使用带有过渡的非固定高度

到目前为止，我的工作很顺利

我试图使手风琴的每个部分都有一个自动高度，但是当我使用“高度：自动”或百分比而不是基于像素的高度时，这些部分的高度是正确的，但过渡会中断

使用css转换是否必须使用固定高度，或者是否有其他解决方法

这是css的相关部分：

#accordion section {
  overflow:hidden;
  height:220px;
}
#accordion section, #accordion .pointer, #accordion h1, #accordion p {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

---

简短的回答是，要使其动画化，您需要固定的高度。这里显示了一个松散的

最大高度
解决方案：


或者使用jQuery的
slideUp（）
/
slideDown（）
您无法转换到
自动高度。您可能需要查看具有此功能的jQueryUIAccordion。请检查：谢谢。我将查看jQuery的slideUp（）/slideDown（）以备将来使用。
#accordion section.ac_hidden {
  max-height:44px;
}

#accordion section {
  overflow:hidden;
  height:auto;
  max-height: 400px;
}