如何为自适应子元素高度的容器实现基于cubic-bezier的弹跳展开效果？

嘿，这个问题我太懂了！你遇到的核心痛点是：transition 对 height: auto 或者过大的 max-height 完全不起作用，导致弹跳效果要么被内容截断，要么发生在空白区域根本看不到。其实换个思路——动态获取容器内容的真实高度，就能让弹跳效果刚好在内容底部显现，完美适配自适应布局。

问题根源拆解 #

你之前用固定值的 max-height，要么值太小会把内容截断，要么值太大导致弹跳发生在空区域（视觉上等于没效果）。而 transition 只认具体的数值属性，auto 这种自适应值没法触发动画，所以我们得先拿到容器内容的真实高度，再把这个值作为动画的目标高度。

解决方案代码 #

我直接把你的示例改成自动适配的版本，去掉了手动输入高度的部分，效果更丝滑：

JavaScript

function expand(){
    let dropdown = document.getElementById('dropdown')
    // 判断当前是否处于收起状态
    if (dropdown.style.maxHeight === '0px' || dropdown.style.maxHeight === '') {
        // 获取容器内容的真实高度（包含所有子元素、padding等）
        const contentHeight = dropdown.scrollHeight + 'px';
        dropdown.style.maxHeight = contentHeight;
    } else {
        // 收起时将高度重置为0
        dropdown.style.maxHeight = '0px';
    }
}

CSS

#dropdown {
    background: lightgreen;
    max-height: 0; /* 初始为收起状态 */
    overflow: hidden; /* 隐藏超出内容，保证弹跳时不会露出空白 */
    transition: max-height 0.4s cubic-bezier(.04,1.59,.83,1.18);
    & > ul {
        border: 1px solid black;    
        margin: 0;
        padding: 0.5rem; /* 加个内边距让内容更美观 */
    }
}

HTML

<p>List of items is ~3rems tall.</p>
<button onclick="expand()">Expand / collapse</button>
<div id='dropdown'>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

为什么这样能行？ #

1. 动态获取真实高度：scrollHeight 属性会返回容器内容的总高度，不管容器当前的显示状态，完美适配子元素的自适应尺寸。
2. 精准的动画目标：把 max-height 设置为这个真实高度，动画的终点刚好是内容的底部，你的 cubic-bezier 曲线会让容器短暂“超过”这个高度再回弹——因为有 overflow: hidden，超出的空白部分不会显示，视觉上就呈现出内容底部的弹跳效果。
3. 反向动画也生效：收起时把 max-height 设回0，同样会触发反向的弹跳动画，交互体验更一致。

额外小提示 #

如果你的容器内容是动态变化的（比如后续会添加/删除子元素），只需要在内容变化后重新计算 scrollHeight 并更新 max-height 就行，scrollHeight 的兼容性拉满，所有现代浏览器都支持。

备注：内容来源于stack exchange，提问作者Micha艂 Turczyn