写一个高度从0到auto的transition动画

要实现高度从 0 到 auto 的平滑过渡动画，单纯使用 CSS 的 transition: height 是无法直接实现的。因为 auto 不是一个具体的数值，浏览器无法计算从 0 到 auto 的过渡值。

以下提供几种实现方案，并解释其优缺点：

1. 使用 max-height 模拟 auto:

这是最常用的方法，设置一个足够大的 max-height 值，使其在实际内容高度小于 max-height 时表现得像 auto。

.container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out; /* 调整过渡时间和效果 */
}

.container.open {
  max-height: 500px; /* 设置一个足够大的值 */
}

• 优点: 简单易用，兼容性好。
• 缺点: 需要预估 max-height 的值，如果实际内容高度超过了 max-height，内容会被裁剪。

2. 使用 JavaScript 计算高度:

使用 JavaScript 获取元素的实际高度，然后将其设置为元素的高度，并触发 CSS transition。

const container = document.querySelector('.container');

function toggleHeight() {
  if (container.classList.contains('open')) {
    container.style.height = '0';
    container.classList.remove('open');
  } else {
    container.style.height = 'auto'; // 先设置为 auto 获取高度
    const height = container.offsetHeight; // 获取实际高度
    container.style.height = '0'; // 重新设置为 0，准备动画
    // 使用 requestAnimationFrame 确保在下一帧渲染时设置高度，以触发动画
    requestAnimationFrame(() => {
      container.style.height = height + 'px';
      container.classList.add('open');
    });
  }
}

container.addEventListener('click', toggleHeight);

.container {
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease-in-out;
}

• 优点: 精确控制高度，无需预估 max-height。
• 缺点: 需要 JavaScript 代码，略微复杂。

3. 使用 CSS transform 的 scaleY:

利用 transform: scaleY(0) 和 transform: scaleY(1) 来实现高度的过渡效果。

.container {
  overflow: hidden;
  transform: scaleY(0);
  transform-origin: top; /* 从顶部开始缩放 */
  transition: transform 0.3s ease-in-out;
}

.container.open {
  transform: scaleY(1);
}

• 优点: 无需预估高度，也无需 JavaScript 代码。
• 缺点: 可能会影响内部元素的布局，尤其是在使用绝对定位或固定定位的元素时。 内容实际占据空间，即使scaleY(0)时，也占据着位置。

选择哪种方案取决于你的具体需求:

• 对于内容高度可预测的情况，max-height 方案最为简单。
• 对于内容高度动态变化的情况，JavaScript 方案最为精确。
• 如果不希望使用 JavaScript，并且对布局影响不敏感，可以考虑 scaleY 方案。

记住在 CSS 中添加 overflow: hidden; 以防止内容在过渡过程中溢出。 同时，根据需要调整过渡时间和效果 (例如 ease-in-out, ease-in, ease-out 等)。

希望以上信息能够帮助你!