问题

对于一个元素的height从0px到100px的变化，应用transition:2s;可以实现丝滑动画，高度逐渐展开，而不是突兀的展示

但是我想对一个高度未知的盒子，实现从height:0px到height:fit-content;的逐步展开，这会导致动画被禁用

那么如何实现这个效果呢

解决方法一

用一个div包裹需要逐步展开的盒子，让父元素height属性进行transition过渡，将子元素的高度通过js赋值给父元素

jsx/html

<button
    onClick={() => {
        setvisible(!visible)
    }}
>
    {visible ? '隐藏' : '展示'}
</button>
<div id='wrap'>
    <div id='content'>
        <p>展示内容</p>
        <p>展示内容</p>
        <p>展示内容</p>
        <p>展示内容</p>
        <p>展示内容</p>
    </div>
</div>

css

#wrap{
    height: 0;
    overflow: hidden;
    transition: 0.5s;
}

js

if (isShow) {
   document.getElementById('wrap').style.height =  document.getElementById('content').clientHeight +'px'
} else {
   document.getElementById('div' + couponItem.voucherId).style.height = '0px'
}

解决方法二

通过max-height属性实现，本方法无需使用js代码，只通过css即可实现 在需要隐藏内容的时候，将closed样式赋给wrap就好（在我的项目中，react+样式模块化，就是：className={visible && style.closed}，visible表示是展示还是隐藏，是boolean类型）

jsx/html

<button
    onClick={() => {
        setvisible(!visible)
    }}
>
    {visible ? '隐藏' : '展示'}
</button>
<div id='wrap' className={visible && style.closed}>
    <div id='content'>
        <p>展示内容</p>
        <p>展示内容</p>
        <p>展示内容</p>
        <p>展示内容</p>
        <p>展示内容</p>
    </div>
</div>

css

#wrap{
    overflow: hidden;
    background-color: pink;
    transition: 1s;
    max-height: 200px;
    height: fit-content;
}

.closed {
    max-height: 0;
}

最终效果