手风琴菜单过渡动画无法生效问题求助

一、过渡动画失效原因及修复 #

你当前用max-height: 100%展开菜单时，浏览器无法计算100%对应的具体像素值，导致过渡动画无法触发。改用内容的实际滚动高度即可解决问题：

修改后的CSS #

恢复注释掉的过渡属性，可选添加缓动函数让动画更自然：

.accordionItemHeader {
    padding: 0 10px;
    cursor: pointer;
    position: relative;
    background-color: $spruce;
    display: flex;
    align-items: center;
      h5 {
        color: $iceBlue;
      }
  }

.accordionItemHeader::after, .accordionItemHeader.active::after {
    font-size: 3.5rem;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%; 
    padding: 0 10px;
    color: $iceBlue;
  }

.accordionItemHeader::after {
    content: "\25BC";
  }

.accordionItemHeader.active::after {
    content: "\25B2";   
  }
  
.accordionContent {
    padding: 10px;
  }

.accordionItemBody {
    max-height: 0;
    overflow: hidden;
    border: 1px $spruce solid;
    padding: 0;
    transition: max-height 0.5s ease; /* 恢复过渡动画 */
  }

修改后的JS #

点击时用scrollHeight获取容器实际高度，替代100%：

const accordionItemHeader = document.querySelector(".accordionItemHeader");
const accordionItemBody = document.querySelector(".accordionItemBody");

accordionItemHeader.addEventListener("click", () => {
  accordionItemHeader.classList.toggle("active");

  if (accordionItemHeader.classList.contains("active")) {
    // 获取容器实际内容高度，支持动态新增元素
    accordionItemBody.style.maxHeight = `${accordionItemBody.scrollHeight}px`;
  } else {
    accordionItemBody.style.maxHeight = "0";
  }
});

二、适配动态新增评论自动展开 #

当通过JS新增评论后，若手风琴处于展开状态，需要重新计算高度。可以封装一个更新函数，在添加评论后调用：

// 更新手风琴高度的工具函数
function updateAccordionHeight() {
  if (accordionItemHeader.classList.contains("active")) {
    // 先重置高度再重新计算，避免DOM更新不及时导致的高度偏差
    accordionItemBody.style.maxHeight = "0";
    requestAnimationFrame(() => {
      accordionItemBody.style.maxHeight = `${accordionItemBody.scrollHeight}px`;
    });
  }
}

// 示例：新增评论的函数（可根据你的实际逻辑调整）
function addNewComment(commentContent) {
  const commentsList = document.querySelector(".commentsPosted");
  // 移除占位文本（如果存在）
  const placeholder = commentsList.querySelector(".placeholderComment");
  if (placeholder) placeholder.remove();
  
  // 创建新评论元素
  const newComment = document.createElement("li");
  newComment.innerHTML = `<p>${commentContent}</p>`;
  commentsList.appendChild(newComment);
  
  // 调用更新函数适配新高度
  updateAccordionHeight();
}

三、完整HTML结构（无需修改） #

<div class="accordion">
  <div class="accordionItem">
    <div class="accordionItemHeader">
      <h5>Comments</h5>
    </div>
    <div class="accordionItemBody">
      <div class="accordionContent">
        <ul class="commentsPosted">
          <!--动态评论将添加到此处-->
          <li class="placeholderComment">
            <p>No comments yet</p>
          </li>
        </ul>    
      </div><!--accordionContent 容器结束 -->
    </div> <!--accordionItemBody 容器结束-->
  </div><!--accordionItem 容器结束-->
</div><!--accordion 容器结束-->

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