スムージネスがより多く表示され、より少なく表​​示される

Question

私は、ユーザーがdivのコンテンツの詳細を表示するかどうかを切り替えることを可能にするdivを持っています。

divには単にアイテムのリストが含まれています。私が何をしたいか

以上を示すと以下を示すの間の遷移をアニメーションです。小さなdivと大きなdivの間の移行。それはジャンプ瞬間

。

実際の例では、divの高さを決めることはできません。トランジションをアニメートするにはどうすればよいでしょうか？

Here is a link to a Codepen which will demonstrate what I am going for.

あなたが最初にあなたのリスト外のあなたのボタンを配置する必要があり

var Box = React.createClass({ 
    getInitialState: function() { 
     return { 
      showingMore: false 
     }; 
    }, 
    handleShowToggle: function() { 
     this.setState({ 
      showingMore: !this.state.showingMore 
     }); 
    }, 
    render: function(){ 
     var {showingMore} = this.state; 
     var showText = showingMore ? 'Show Less' : 'Show More'; 
     var style = {display: showingMore ? 'block' : 'none'} 
     return (
      <div> 
       <ul> 
        <li style={style}>Sometimes show me</li> 
        <li style={style}>Sometimes show me</li> 
        <li style={style}>Sometimes show me</li> 
        <li>Always show me</li> 
        <li style={style}>Sometimes show me</li> 
        <li onClick={this.handleShowToggle}>{showText}</li> 
       </ul> 
      </div> 
     ) 
    } 
}) 

ReactDOM.render(<Box />, document.getElementById('react')); 

Answer 1

を反応します。

 <div> 
      <ul id="myUl" style={{height: myUlHeight}}> 
       <li style={style}>Sometimes show me</li> 
       <li style={style}>Sometimes show me</li> 
       <li style={style}>Sometimes show me</li> 
       <li>Always show me</li> 
       <li style={style}>Sometimes show me</li> 
      </ul> 

      <button onClick={this.handleShowToggle}>{showText}</button> 
     </div> 

その後、あなたは今、あなたは、この高さを持っていることを含むUL：

myUlHeight = document.getElementById('myUl').clientHeight 

の高さを取得するには、このJavaScriptを使用することができ、あなたがulしたい高さを渡すことができます（完全な高さか100pxだけです。同じ方法でliの高さをつかむこともできます）。

CSSを使用してアニメーションを作成します。

これを円滑にしたい場合は、アイテムの表示を切り替えないでください。この回答のためhttps://react-bootstrap.github.io/components.html#panels-collapsible