html - 如何在 Accordion 上使用非固定高度和过渡

Question

我目前的工作是 here - http://jsfiddle.net/WDz6R/ .

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

是否必须使用固定高度才能使用 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;
}

Answer 1

简短的回答，要让它动画化你需要固定的高度。这里显示了一个草率的 max-height 解决方法:

http://jsfiddle.net/WDz6R/3/

#accordion section.ac_hidden {
  max-height:44px;
}

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

或者使用 jQuery 的 slideUp()/slideDown()