手风琴组件中的 CSS 转换不起作用

Question

我不确定 CSS 转换是否正确。我正在开发一个手风琴组件，我只想在展开和折叠状态之间平滑变化。这是代码：

.accordion {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  font-family: "Poppins";
  transition: all 1s ease-in-out;
}


.content {
  margin-top: 10px;
  overflow: hidden;
  transition: all 1s ease-in-out;
}

<div className={styles.accordion} style={accordionStyle}>
      <div className={styles.title} onClick={handleExpandClick}>
        <span>{title}</span>
        {!hideIcon && <span>{expanded ? "-" : "+"}</span>}
      </div>
      {expanded && <div className={styles.content}>{children}</div>}
    </div>

但是，手风琴突然发生变化，而不是使用我设置的过渡。我正在做的事情有什么问题吗？

Answer 1

您正在使用

content

有条件地渲染

expanded

div。您似乎认为 CSS 过渡会向渲染/取消渲染添加过渡，但实际上并非如此。一旦

expanded

变为

false

，

<div className={styles.content}>{children}</div>

就会立即停止渲染。这与 CSS 完全分开，即使您设置了正确的 CSS 过渡，您也不会看到它，因为

content

div 正在立即渲染/取消渲染）。目前，您的代码没有显示任何类型的转换效果。

专注于实现手风琴效果实际需要发生的事情。内容在折叠时需要垂直收缩，或者在展开时垂直增长。有多种 CSS 属性可以帮助解决这个问题（

clip-path

、

max-height

、

flex

等）。然后，您只需在隐藏内容的值和显示内容的值之间进行转换。 这是一个使用

max-height

的非常简单的示例，不考虑填充或适当的初始高度：https://codepen.io/SonicBoomNFA/pen/RwEvozJ。希望这能为您提供一个起始方向。