小麒麟

V1

2023/01/04阅读:21主题:全栈蓝

css 对于高度未知的盒子,使用transition实现展开收起过渡 (两种方法)

问题

对于一个元素的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;
}

最终效果

效果展示.gif
效果展示.gif

分类:

前端

标签:

CSS

作者介绍

小麒麟
V1