我不确定 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>
但是,手风琴突然发生变化,而不是使用我设置的过渡。我正在做的事情有什么问题吗?
您正在使用
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。希望这能为您提供一个起始方向。