手风琴组件CSS Transition不生效，无法实现平滑展开收起？

你的手风琴切换时没有过渡效果，核心问题有两个：

问题根源 #

• 你通过{expanded && <div className={styles.content}>{children}</div>}直接挂载/卸载.content元素，CSS过渡仅能作用于已存在元素的属性变化，元素新增或删除时不会触发过渡动画。
• .content没有设置可过渡的高度类属性，过渡需要明确的起始和结束状态值。

修改方案 #

1. 调整CSS代码 #

给.content设置收起状态的初始高度，通过类名切换展开状态的高度，同时指定具体过渡属性（避免用all提升性能）：

.accordion {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  font-family: "Poppins";
}

.content {
  margin-top: 0; /* 收起时隐藏margin */
  overflow: hidden;
  max-height: 0; /* 收起状态的初始高度 */
  transition: max-height 0.5s ease-in-out, margin-top 0.5s ease-in-out;
}

.content.expanded {
  max-height: 1000px; /* 设置一个比内容实际高度大的值 */
  margin-top: 10px;
}

2. 修改JSX结构 #

不要卸载.content元素，而是通过添加/移除类名来控制展开状态：

<div className={styles.accordion} style={accordionStyle}>
  <div className={styles.title} onClick={handleExpandClick}>
    <span>{title}</span>
    {!hideIcon && <span>{expanded ? "-" : "+"}</span>}
  </div>
  {/* 始终渲染content容器，用类名控制显隐动画 */}
  <div className={`${styles.content} ${expanded ? styles.expanded : ''}`}>
    {children}
  </div>
</div>

补充说明 #

如果内容高度不确定，max-height是最简便的实现方式；若需要更精准的高度控制，可以通过JS动态计算内容的实际高度，再给.content设置height属性的过渡，但max-height足以覆盖绝大多数场景。

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