背景：height 为auto，transition不支持动画。此时可以通过js计算height来指定动画。但是如果数据量很大，自动计算出来的高很高，这时候动画也会出现卡顿现象。即页面打开数据加载出来，但是点击收起，无法收起，卡很久。用自带的tree组件就会出现这种情况，但是原因没有确定。

解决方法1

可以通过js计算高度，再加上限制一个最大高度，比如500px，低于500采用其本身，高度高于500，采用500px。这样不会卡顿。但是中间会有滚动条，如果外层也有滚动条，就会出现两列滚动条。此种方法可以考虑。

解决方法2

采用grid布局。参考链接：https://www.php.cn/faq/500738.html

//样式
 html,
    body {
      margin: 0;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: aliceblue;
      gap: 15px
    }

    .trigger {
      border: 0;
      background-color: royalblue;
      color: #fff;
      outline: 0;
      font-size: 16px;
      padding: 0.4em 1em;
      border-radius: 0.2em;
      cursor: pointer;
    }

    .grid {
      position: absolute;
      margin-top: 10px;
      max-width: 250px;
      border-radius: 5px;
      display: grid;
      grid-template-rows: 0fr;
      transition: 0.3s;
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.65);
      color: #fff;
    }

    .grid>* {
      min-height: 0;
      padding: 0 10px;
    }

    .wrap:hover .grid {
      grid-template-rows: 1fr;
    }

    span {
      padding: 10px;
    }
// html代码
 <div class="wrap">
      <button class="trigger">鼠标放上来试试</button>
      <div class="grid">
        <div>
          <div style="height: auto;line-height: 32px;">
            <p>欢迎关注前端侦探，这里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧，比如这篇文章，如何让 auto height 支持过渡动画？一起看看吧</p>
          </div>
          <div style="height: auto;line-height: 32px;">
            <p>欢迎关注前端侦探，这里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧，比如这篇文章，如何让 auto height 支持过渡动画？一起看看吧</p>
          </div>
        </div>
      </div>
    </div>

核心样式如下：

image.png

需要注意的是：class为gird的div 设置的样式由grid-template-rows: 0fr; 变化到grid-template-rows: 1fr; 这里得保证其只有一个子节点。如果多个子节点，此样式只控制第一个子节点。这种情况可以在外层再包裹一次div。
另外：数据量多也不再卡顿，也只有一个滚动条。但是如果高度特别高，就会出现动画效果卡一下。我理解是因为动画设置了时间，需要0.3秒的时间内，完成整个高度的收缩，所以高度很高就会一下子闪没，不会慢慢收缩。