
小麒麟
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;
}
最终效果
作者介绍

小麒麟
V1