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