显示更多和显示更少之间的平滑度

Question

我有一个 div，它允许用户在显示更多 div 内容和显示更少内容之间切换。

div 只包含一个项目列表。

我想做的是动画显示更多和更少显示之间的过渡；小 div 和 large 之间的过渡。

在它跳跃的那一刻。

在现实世界的例子中，我可能永远不会设置或知道 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