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

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

div只包含一个项目列表

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

在它跳跃的那一刻

在一个真实的例子中，我可能永远不会设置或知道div的高度。什么是设置过渡动画的好方法

反应

var-Box=React.createClass({
getInitialState:函数（）{
返回{
showingMore：错
};
},
handleShowToggle:函数（）{
这是我的国家({
showingMore:！this.state.showingMore
});
},
render:function（）{
var{showingMore}=this.state；
var showText=showingMore？'Show Less'：'Show More'；
var style={display:showingMore？'block'：'none'}
返回(

有时给我看
有时给我看
有时给我看
总是给我看
有时给我看
{showText}

)
}
})
render（，document.getElementById（'react'）；

您需要先将按钮放在列表之外

        <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

（全高或仅100px。您也可以使用相同的方法获取

li

的高度）

并使用CSS制作动画

如果希望保持平滑，则不应切换项目的显示

---

如果您不想自己动手，还可以查看带有可折叠面板的库

react bootstrap

：

Hi，谢谢您的回答。我无法让它工作，因为我从ul的clientheight测得的高度总是落后一步——倒塌时是大尺寸，反之亦然。有解决问题的建议吗？你应该在动画结束时得到高度

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

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