为什么在显示和隐藏 div 时我的缓动转换速度会加快？

Question

我正在为最近的项目创建一个手风琴类型的问答页面。单击问题即可显示问题的答案。我的方法是用 max-height = 0 和 Overflow = hide 隐藏答案，当按下问题时，它会更新一个索引值，该索引值将答案的类名设置为活动。

<div className={`answer ${activeIndex === index ? "active" : ""}`} >

             {item.Answer}   
                  
</div>

然后将最大高度设置为更大的值，从而揭示答案。

.answer{
  max-height: 0;
  overflow: hidden;
  margin-left:5rem;
  transition: ease 0.7s;
}

.answer.active{
  padding-bottom: 2rem;
  max-height: 500px;
}

出现的问题是，当我关闭答案时，过渡会以稳定的速度进行，但在完全关闭之前会减慢速度。打开答案时也会发生同样的事情，尽管不太明显。

我尝试将过渡类型更改为缓入出，认为关闭过渡存在问题。但这并没有解决问题。没有其他转换可能会影响页面的这一部分。

Answer 1

使用 max-height 实现手风琴过渡有其缺点，其中之一当然是硬编码值（您使用了 500px），因为如果最大高度与实际高度明显不同，则过渡不会向右看，正如您所发现的。一种解决方案是使用Javascript来确定内容的实际高度并动态更新最大高度。网格可能是更好的解决方案。

实验性 CSS 属性 interpolate-size 已在 Blink/Chromium/Chrome/Edge 中实现，可以将真实的

height

从零过渡到

auto

。该属性是否会在其他主要浏览器中实现还有待观察。