这是个很典型的max-height动画陷阱，我来帮你梳理原因和解决办法～

问题根源 #

你遇到的“收起动画等待展开完成”的视觉效果，本质是因为max-height设置的数值远大于内容实际高度导致的动画时间分配不合理：

• 展开时，动画从0px到250px，但内容实际高度可能只有100px左右，前40%的动画是内容真正展开，剩下60%是“空跑”的无效动画
• 收起时，动画从250px到0px，前60%是无效的空白动画，后40%才是内容真正收起

当你快速切换hover元素时，展开动画的有效部分先结束，而收起动画的有效部分要等一段时间才开始，看起来就像是收起在等展开完成。

解决方案 #

方案1：纯CSS优化（适合内容高度固定的场景）

• 先估算内容的实际高度，把max-height设为接近实际高度的数值，减少无效动画的占比
• 优化transition的时间曲线，让动画的有效部分更紧凑
• 统一把transition写在.hiddenContent基类里，避免重复定义

修改后的CSS代码：

.container { 
  height: auto;
  margin: 1rem 0; /* 加个间距，方便hover切换 */
}
.hiddenContent { 
  max-height: 0px; 
  overflow: hidden; 
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* 用更紧凑的时间曲线 */
}
.container:hover > .hiddenContent { 
  max-height: 120px; /* 设为接近内容实际高度的数值，比如120px */
}

方案2：JavaScript动态计算高度（适合内容高度动态变化的场景）

如果内容高度不固定，我们可以用JS获取元素的真实高度（scrollHeight），动态设置max-height，让动画完全贴合内容高度，彻底消除无效动画：

<div class="container">
  <h2>Hover me to expand</h2>
  <div class="hiddenContent">
    <h4>Hidden title</h4>
    <p>Hidden content lorem ipsum sid dolor amet</p>
  </div>
</div>
<div class="container">
  <h2>Hover me to expand</h2>
  <div class="hiddenContent">
    <h4>Hidden title</h4>
    <p>Hidden content lorem ipsum sid dolor amet</p>
  </div>
</div>
<div class="container">
  <h2>Hover me to expand</h2>
  <div class="hiddenContent">
    <h4>Hidden title</h4>
    <p>Hidden content lorem ipsum sid dolor amet</p>
  </div>
</div>

<script>
  const hiddenContents = document.querySelectorAll('.hiddenContent');
  // 预计算每个隐藏内容的真实高度
  hiddenContents.forEach(el => {
    el.style.setProperty('--real-height', `${el.scrollHeight}px`);
  });
</script>

<style>
.container { 
  height: auto;
  margin: 1rem 0;
}
.hiddenContent { 
  max-height: 0px; 
  overflow: hidden; 
  transition: max-height 0.6s ease;
}
.container:hover > .hiddenContent { 
  max-height: var(--real-height); /* 使用动态计算的真实高度 */
}
</style>

这样修改后，切换hover元素时，展开和收起动画就会完全同步执行，不会有延迟感了。

内容的提问来源于stack exchange，提问作者leonardo-dt