Question

到目前为止，我的工作是here - http://jsfiddle.net/WDz6R/。

我试图让手风琴的每个部分都有一个自动高度，但是当我使用＆＃39; height：auto＆＃39;或者百分比而不是基于像素的高度，这些部分是正确的高度，但转换会中断。

是否必须使用固定高度才能使用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＆＃39; slideUp() / slideDown()

如何使用非固定高度与手风琴上的过渡

1 个答案: