可折叠面板动画失效求助：需实现上下平滑展开/收起过渡

你的可折叠面板动画失效的核心原因有三个：

1. 同时混用display: none/block和max-height控制显示隐藏，display的瞬间切换会直接打断max-height的过渡动画，导致没有平滑效果。
2. 初始状态content设为display:none，会让元素完全不可见，无法获取正确的scrollHeight值，展开时动画异常。
3. 过渡动画加在了外层的.question_box上，但实际需要动画的是内容区域.content。

下面是修复后的完整代码：

JavaScript代码 #

var arrow = document.getElementById("arrow");
var content = document.getElementById("content");
var arrow_icon = document.getElementById("arrow_icon");

function arrow_click() {
    // 完全依靠max-height控制展开收起，不再使用display属性
    if (content.style.maxHeight) {
        content.style.maxHeight = null;
    } else {
        // 获取内容实际高度并设置，触发动画
        content.style.maxHeight = content.scrollHeight + "px";
    } 
    
    // 切换箭头图标，用includes兼容类名顺序变化
    arrow_icon.className = arrow_icon.className.includes("fa-angle-down") ? "fa fa-angle-up" : "fa fa-angle-down";
}

CSS代码 #

html{
    font-family:sans-serif;
}

.question_box{
    width:300px;
    border-radius:25px;
    background-color:#9DD36E;
    padding:25px;
}

.question_div{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:15px;
    font-size:30px;
    font-weight:bold;
}

.links_div{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    font-size:25px;
}

.answers_div{
    margin-top:15px;
    margin-left:10px;
    margin-right:10px;
    text-align:justify;
}

.content{
    /* 去掉display:none，用max-height和overflow:hidden实现隐藏 */
    max-height:0;
    overflow:hidden;
    /* 给内容区域加上过渡动画 */
    transition: max-height 0.3s ease-out;
    -moz-transition: max-height 0.3s ease-out;
    -webkit-transition: max-height 0.3s ease-out;
    -o-transition: max-height 0.3s ease-out;
    -ms-transition: max-height 0.3s ease-out;
}

.arrow{
    margin-top:15px;
    text-align:center;
    font-weight:bold;
    font-size:45px;
    cursor:pointer; /* 鼠标悬停显示指针，提升交互感 */
}

HTML代码 #

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="question_box">    
    <div class="question_div collapsible">
        What is lorem ipsum?
    </div>
    
    <!-- 移除内联的display:none样式 -->
    <div id="content" class="content">
        <div class="links_div">
            1,2,3       
        </div>
        
        <div class="answers_div">
        Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.       
        </div>
    </div>

    <div id="arrow" class="arrow" onclick="arrow_click();">
        <i id="arrow_icon" class="fa fa-angle-down"></i>
    </div>
    
</div>  
</body>
</html>

关键修改说明 #

• 彻底移除display属性的控制，仅通过max-height的变化配合overflow:hidden实现平滑的展开收起动画。
• 将过渡动画从外层容器移到内容区域，确保动画作用在正确的元素上。
• 去掉初始状态的display:none，保证能获取到内容的真实高度scrollHeight，让展开动画正常触发。
• 优化箭头图标的判断逻辑，避免因类名顺序等问题导致切换失效。
• 增加鼠标指针提示，提升用户交互体验。

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