css 高度自动过渡三种方法（max-height、transform: scaleY()、grid-template-rows: 0fr）

原创

已于 2025-01-13 15:55:53 修改 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

于 2024-08-28 12:42:05 首次发布

方法一：使用max-height

<div class="dropdown">
            <div class="dropdown-toggle">hover me</div>
            <div class="dropdown-menu">
              <div class="content">
                <ul>
                  <li>Lorem, ipsum dolor.</li>
                  <li>Aut, ab facere.</li>
                  <li>Sint, assumenda reprehenderit!</li>
                  <li>Facilis, ipsa dolore!</li>
                  <li>Quae, nam provident!</li>
                  <li>Laborum, neque eligendi!</li>
                  <li>Ad, quas quo.</li>
                  <li>Vitae, facilis similique.</li>
                </ul>
              </div>
            </div>
          </div>