CSS transition中如何实现动态高度动画，解决无法支持元素高度为auto变化的问题

在CSS transition中，确实不支持高度为auto的元素变化。但是，你可以使用max-height来模拟高度的动态变化，从而实现高度动画的效果。

你可以把元素的max-height设置为一个比较大的值，然后把它的实际高度设置为0，这样元素就被隐藏了。在需要展示元素时，把它的max-height设置为实际高度，这样元素就会从0到实际高度逐渐展开，产生动态高度的效果。

具体实现的代码示例如下：

HTML代码：

<div class="box">
  <p>这是一段文字，初始状态下是隐藏的。</p>
  <button>Show</button>
</div>

CSS代码：

.box {
  max-height: 0;
  overflow: hidden; /* 限制内容出现在元素外部 */
  transition: max-height 0.5s ease; /* 动画效果及时长 */
}

/* 激活时的状态 */
.box.active {
  max-height: 500px; /* 最大高度值，足够显示所有内容 */
}

/* 激活按钮样式 */
.box button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #0066cc;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
}

JavaScript代码：

// 激活按钮的点击事件
document.querySelector('.box button').addEventListener('click', function() {
  document.querySelector('.box').classList.toggle('active');
});

在点击按钮时，会通过添加或移除.active类来切换元素的状态，从而实现高度动画的效果。