我不确定我是否有正确的CSS转换。我正在处理一个 accordion 组件，我只想在展开和折叠状态之间实现平滑的切换。代码如下：
.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>然而， accordion 突然改变，而不是使用我设置的过渡。我做的有什么不对吗？
1条答案
按热度按时间wmvff8tz1#
您正在使用
expanded有条件地呈现contentdiv。看起来你认为CSS过渡会给渲染/取消渲染添加一个过渡，但实际上它不是这样工作的。一旦expanded变为false，<div className={styles.content}>{children}</div>立即停止渲染。这是完全独立的CSS，即使你有一个适当的CSS过渡设置，你不会看到它，因为contentdiv是renderen/unrender即时。目前，您的代码中没有任何内容显示任何类型的转换效果。专注于实际需要发生的事情，以实现 accordion 效果。内容需要在折叠时垂直收缩，或在展开时垂直增长。有各种CSS属性可以帮助解决这个问题（
clip-path，max-height，flex等）。然后，您只需在隐藏内容的值和显示内容的值之间进行转换。下面是一个非常简单的例子，使用max-height，没有考虑填充或适当的初始高度：https://codepen.io/SonicBoomNFA/pen/RwEvozJ。希望这能给你一个开始的方向。