CSS 百分比高度过渡滞后

Question

<Accordion selected="2">
    <Accordion.Section title="Section 1" id="1">
        Section 1 content           
    </Accordion.Section>
    <Accordion.Section title="Section 2" id="2">
        Section 2 content         
    </Accordion.Section>
    <Accordion.Section title="Section 3" id="3">
        Section 3 content
    </Accordion.Section>
</Accordion>

http://jsfiddle.net/sm74cgew/17/

在此手风琴示例中，单击单个面板时，有一个从 0 到 100% 的简单高度过渡。现在，当您单击第一个面板时，这完美运行。之后，有一个"滞后"，因为它将前一个面板转换回 0。

首先，在查看ReactCSSTransitionGroup时，输入/离开似乎是一个解决方案，但我没有DOM元素在这里消失/进入。高度只是从 0 调整到 100%。

我仍然希望有一个过渡效果，但我不希望出现奇怪的滞后。有什么建议吗？

我希望让它像jQuery的向上/向下滑动 http://jsfiddle.net/xyfgxvca/一样工作

Answer 1

使用 CSS

转换高度可能有点棘手，但您可以使用 JS 和 React 而不是纯 CSS 来实现。

1º.设置组件的初始高度

getInitialState: function(){
     return {height: 0}
}

2º 将高度应用于部分的主体并设置参考

<div style={{height: this.state.height}} ref="body" className="body">

3º 当所选道具发生变化时更新组件高度

componentWillReceiveProps: function(nextProps){
         if(nextProps._selected !== this.props._selected){
           if(nextProps._selected){
              this.setState( {
                 height: React.findDOMNode(this.refs.body).scrollHeight
              });
           }
           else{
              this.setState( {
                 height: 0
              });
           }
        }
},

完整工作示例