模态内容更改高度过渡动画

问：

我有一个具有不同屏幕/内容的模态。当新内容出现时，模态应为其高度添加动画效果。

我无法用纯 CSS 实现这一目标似乎很疯狂。但我无法弄清楚如何做到这一点。我什至可以在模态上设置最大高度。

我读过这样的文章： https://keithjgrant.com/posts/2023/04/transitioning-to-height-auto/

使用 flexbox 或 grid 过渡到 Height Auto（两种方式），但无法弄清楚如何将该技术用于我的模态。因为该技术是基于悬停的。而不是内容更改。

HTML格式：

<!-- 1. The dialog container -->
<div
   class="cms-modal-container cms-alert-modal"
   id="alert-modal"
   aria-labelledby="alert-modal-header"
   aria-hidden="true"
   data-a11y-dialog="alert-modal"
>

<!-- 2. The dialog overlay -->
<div class="cms-modal" data-a11y-dialog-hide></div>

<!-- 3. The actual dialog -->
<div class="cms-modal__content cms-modal__content--alert wrapper" role="document">
    <!-- Modal Close Button -->
    <button type="button" data-a11y-dialog-hide aria-label="Close dialog" class="cms-modal__close">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true" class="cds--modal-close__icon"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path></svg>
    </button><!-- /Modal Close Button -->

    <h1 id="alert-modal-header" class="cms-modal-heading cms-modal-heading--alert">Alert Modal Header</h1>
        
    <!-- Modal Content Here -->
    <div class="cms-modal-alert__content slide-1">
        <p>Slide 1: This is alert modal content. The content has a maximum width of 498px so it will wrap to the next line. <a href="">Inline Test Link</a></p>
      <br>
      <button type="button" class="btn-slide-2">Slide 2</button>
    </div><!-- /Slide 1 -->