之間的平滑顯示更多，更少顯示

Question

我有一個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> 

然後，你可以使用這個JavaScript來獲得含UL：

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

的高度，現在，你有這樣的高度，你可以把你想要的ul高度（全高或只有100px，您也可以使用相同的方法獲取li的高度）。

並使用CSS製作動畫。

如果你想保持這種平滑，你不應該切換項目的顯示。

你也可以看看有，如果你不想自己做一個可摺疊的面板庫react-bootstrap：https://react-bootstrap.github.io/components.html#panels-collapsible