如何为Pico.css Accordion（折叠面板）添加高度动画效果

直接给<details>元素加过渡样式无效，核心原因有两点：

1. 原生<details>的展开/折叠是通过切换display属性实现的，而display不支持CSS过渡
2. 元素默认的height: auto无法被过渡动画识别

要实现平滑的高度动画，需要用max-height + overflow的技巧，同时适配Pico.css的默认样式，具体实现如下：

完整解决方案代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>XYZ</title>
    <link href="https://cdn.jsdelivr.net/npm/@picocss/pico@1.5.11/css/pico.min.css" rel="stylesheet">
    <style>
        /* 重置details默认margin，避免动画间隙 */
        details {
            margin-bottom: 0 !important;
            overflow: hidden;
        }

        /* 折叠内容容器：初始收起状态 */
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            /* 继承Pico的内边距样式，保持视觉统一 */
            padding: 0 1rem;
        }

        /* 展开状态：设置足够大的max-height（需大于内容实际高度） */
        details[open] .accordion-content {
            max-height: 500px;
            padding: 1rem;
            margin-top: 0.5rem;
        }
    </style>
</head>
<body>
    <main class="container">
        <section>
            <h2>Test</h2>
            <details>
                <summary>Accordion</summary>
                <!-- 所有折叠内容需放入这个容器内 -->
                <div class="accordion-content">
                    <p>Hi there</p>
                    <p>Hi there</p>
                    <p>Hi there</p>
                    <p>Hi there</p>
                    <p>Hi there</p>
                    <p>Hi there</p>
                    <p>Hi there</p>
                </div>
            </details>
        </section>
    </main>
</body>
</html>

关键细节说明 #

• 用.accordion-content容器包裹折叠内容，通过max-height的变化实现过渡（max-height是支持CSS动画的属性）
• 展开时设置的max-height值要足够大，确保能容纳所有内容（若内容高度不确定，可设一个合理上限，比如500px）
• 重置details的默认margin，并给容器添加和Pico一致的padding，保证样式和原框架统一

内容的提问来源于stack exchange，提问作者Andreas