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的效果基本show /下http://jsfiddle.net/xyfgxvca/

Answer 1

过渡使用CSS可能是一个有点棘手的高度，但可以实现，使用JS &阵营纯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 
       }); 
      } 
     } 
}, 

full working example