Question

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

然后，您可以使用此JavaScript来获取包含ul的高度：

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

现在您已达到此高度，您可以将所需的高度传递到ul（全高或仅100px。您也可以使用相同的高度抓住li的高度方法）。

使用CSS制作动画。

如果您想保持平稳，则不应切换项目的显示。

如果您不想自己动手，也可以查看具有可折叠面板的库react-bootstrap：https://react-bootstrap.github.io/components.html#panels-collapsible

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

1 个答案: