Glätte zwischen mehr und weniger anzeigen

Question

Ich habe eine div, die es einem Benutzer ermöglicht, zwischen mehr div Inhalte anzeigen und weniger davon anzuzeigen.

Das div enthält einfach eine Liste von Elementen.

Was ich tun möchte, ist, den Übergang zu animieren zwischen mehr zeigt und weniger zeigt; der Übergang zwischen kleinen div und groß.

Im Moment ist es springt.

In einem realen Beispiel kann ich nie die Höhe des div festlegen oder kennen. Was ist eine gute Möglichkeit, den Übergang zu animieren?

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

Reagieren

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

Zuerst müssen Sie Ihre Schaltfläche außerhalb Ihrer Liste setzen.

 <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> 

Dann können Sie diese Javascript verwenden, um die Höhe des umschließenden ul zu erhalten .:

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

Nun, da Sie die Höhe dieses haben, können Sie die Höhe, die Sie an die ul wollen passieren (entweder volle Höhe oder nur 100px. Sie können auch die Höhe des li mit der gleichen Methode greifen).

Und machen Sie die Animation mit CSS.

Wenn Sie dies ruhig halten möchten, sollten Sie die Anzeige des Elements nicht umschalten.

Sie können auch in der Bibliothek suchen react-bootstrap, die eine zerlegbare Platte hat, wenn man es nicht selbst tun will: https://react-bootstrap.github.io/components.html#panels-collapsible