使用纯 CSS 实现元素高度的过渡（不采用 max-height）

要使用纯 CSS 实现元素高度的过渡，而不使用 max-height，可以使用 height 和 transition 属性。以下是一个实现元素高度过渡的例子：

HTML:

<div class="container">
  <div class="content">
    这里是内容...
  </div>
  <button id="toggle">Toggle</button>
</div>

CSS:

.container {
  overflow: hidden;
}
 
.content {
  transition: height 0.3s ease;
  height: 0;
  background-color: lightblue;
  overflow: hidden;
}
 
.content[data-state="open"] {
  height: auto;
  max-height: 1000px; /* 设置一个足够大的最大高度以确保内容加载后能够过渡 */
}

JavaScript:

document.getElementById('toggle').addEventListener('click', function() {
  var content = document.querySelector('.content');
  content.setAttribute('data-state', content.getAttribute('data-state') === 'open' ? 'closed' : 'open');
});

在这个例子中，.content 初始时高度为 0，通过点击按钮切换 data-state 属性来控制高度的变化。当 data-state 为 open 时，.content 的高度会设置为 auto 并且最大高度为 1000px，这样内容加载后就可以平滑地过渡到显示全部内容的状态。