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のslideup /ダウンhttp://jsfiddle.net/xyfgxvca/

Answer 1

のように動作させるために探しています

CSSを使用して高さを移行することは少しトリッキーかもしれないが、あなたはJS &を使用して、純粋なCSSの代わりに反応することを達成することができます。

1º。

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

はあなたの部分のボディに高さを適用し、を選択小道具が

を変更したとき

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

は、コンポーネントの高さを更新し3ºREFに設定2ºコンポーネントの初期高さを設定します。

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