手风琴（Accordion）关闭过渡效果失效，寻求修复方案

问题描述 #

我正在开发一款带有开合过渡效果的Accordion组件，目前打开过渡效果正常，但关闭过渡效果无法实现。我猜测可能需要修改JavaScript代码（比如新增一个"active"类），但不确定具体方案。我仍在学习HTML/CSS/JavaScript，代码可能存在不足，恳请提供建议。

问题根源 #

1. 同时使用display: none/block和max-height控制显示隐藏：display属性变化是瞬间的，会直接中断过渡动画，导致关闭时看不到max-height的收缩效果。
2. CSS中.accordion-content.opened逻辑颠倒：默认应设置max-height: 0，打开时才赋予内容高度，而非反过来。
3. 部分CSS使用嵌套语法，若未搭配Sass/LESS预处理器会导致样式失效。

修正后的代码 #

JavaScript #

var acc = document.getElementsByClassName("label");

for (var i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    panel.classList.toggle("opened");
    
    if (panel.classList.contains("opened")) {
      // 打开时设置max-height为内容实际高度
      panel.style.maxHeight = panel.scrollHeight + "px";
    } else {
      // 关闭时先过渡到max-height:0
      panel.style.maxHeight = "0";
      // 过渡结束后重置样式，避免影响后续操作
      panel.addEventListener("transitionend", function() {
        if (!panel.classList.contains("opened")) {
          panel.style.maxHeight = "";
        }
      }, { once: true });
    }
  });
}

CSS #

.accordions {
  max-width: 760px;
  width: 100%;
  gap: 35px;
}

.accordion-body {
  padding: 24px;
  background-color: white;
  border-radius: 16px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  outline: none;
}

.label {
  padding: 24px;
  background-color: white;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.label p {
  font-size: 24px;
  margin: 0;
}

.label img {
  width: 50px;
  height: 50px;
  transition: 0.25s;
}

.active img {
  transform: rotate(-180deg);
}

.accordion-content {
  padding: 0 24px;
  background-color: white;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  max-height: 0;
  overflow: hidden;
  gap: 24px;
  transition: max-height 0.2s ease-out, padding 0.2s ease-out;
}

.accordion-content hr {
  margin: 0 0 20px 0;
  border: 1px solid black;
}

.accordion-content p {
  margin: 0;
}

.accordion-content.opened {
  max-height: 500px; /* 设置足够大的值，或用JS动态计算 */
  padding: 24px;
}

HTML #

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>发现你的运动</title>
  <link rel="stylesheet" href="css/main.css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
</head>

<body>
  <main class="main d-flex justify-content-center align-items-center flex-column">
    <div class="accordion-body w-100" id="faq-1">
      <button class="label">
        <p class="fw-bold">为什么要把运动当爱好？</p>
        <img src="accordion-icon.svg" alt="折叠图标" />
      </button>
      <div class="accordion-content">
        <hr />
        <p class="fw-medium">
          把运动当爱好能改善身心健康、缓解压力、提升睡眠质量、帮助维持健康体重，还能提供社交机会。这也是学习新技能、享受闲暇时光的好方式。
        </p>
      </div>
    </div>
  </main>
  <script src="accordionSection.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>

</html>

核心修改说明 #

• 移除display: none/block控制：完全用max-height实现过渡，避免打断动画。
• 调整CSS默认状态：默认max-height: 0、padding: 0 24px，打开时恢复完整内边距和高度，保证过渡自然。
• 监听过渡结束事件：关闭动画完成后重置max-height，避免影响下一次打开操作。
• 兼容普通CSS：把嵌套语法改为常规写法，确保样式在无预处理器环境下生效。

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