使用JavaScript和VueJS实现height:0到height:auto的双向过渡动画

我太懂这种不想妥协用max-height的心情了——毕竟max-height得预估一个足够大的值，有时候会导致动画快慢不均，体验感打折扣。你遇到的收起时动画不对的问题，核心原因是浏览器无法识别height:auto对应的具体像素值，当你从auto切换到0时，浏览器相当于直接“跳”到目标状态，没有办法计算中间的过渡帧，自然就达不到预期的动画时长。

下面给你一套不用max-height的纯JS+CSS解决方案，完美实现双向平滑过渡：

核心思路 #

展开时：先获取内容容器的实际高度（用scrollHeight），把height设为这个具体数值触发过渡，之后可以再重置为auto（方便内容动态更新时自适应）；
收起时：先把容器高度临时设为当前的scrollHeight（确保过渡的起点是明确的数值），再切换到0，让浏览器能计算完整的过渡动画。

代码实现 #

HTML结构

<button class="toggle-btn">切换展开/收起</button>
<div class="content-container">
  <div class="content">
    这里是需要展开收起的内容，长度可以任意变化，不用提前预估高度。比如加更多文字测试一下：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

CSS样式

.content-container {
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease; /* 这里设置你想要的动画时长 */
}

JavaScript逻辑

const toggleBtn = document.querySelector('.toggle-btn');
const container = document.querySelector('.content-container');
const content = document.querySelector('.content');

toggleBtn.addEventListener('click', () => {
  if (container.classList.contains('open')) {
    // 收起逻辑
    container.style.height = `${content.scrollHeight}px`;
    // 强制浏览器重绘，确保过渡触发
    requestAnimationFrame(() => {
      container.style.height = '0px';
    });
    container.classList.remove('open');
  } else {
    // 展开逻辑
    container.style.height = `${content.scrollHeight}px`;
    container.classList.add('open');
    // 过渡完成后重置为auto，方便内容动态变化
    setTimeout(() => {
      container.style.height = 'auto';
    }, 300); // 这个时间要和CSS里的transition时长一致
  }
});

// 可选：如果内容可能动态变化，监听内容变化重新计算高度
const observer = new MutationObserver(() => {
  if (container.classList.contains('open')) {
    container.style.height = `${content.scrollHeight}px`;
    setTimeout(() => {
      container.style.height = 'auto';
    }, 300);
  }
});
observer.observe(content, { childList: true, subtree: true, characterData: true });

关键细节解释 #

• scrollHeight：能准确获取元素内容的实际高度，包括超出容器的部分，这是我们能实现精准过渡的核心。
• requestAnimationFrame：强制浏览器在重绘后再执行收起的height设置，确保过渡动画能被正确触发，不会跳过中间帧。
• 展开后重置为height:auto：这样如果后续内容有变化（比如加载了新内容），容器能自动适应高度，不用重新计算。

这个方案完全规避了max-height的局限性，双向过渡都能严格按照你设置的时长执行，完美匹配你的需求。

内容的提问来源于stack exchange，提问作者Hurt Box