纯css实现height:auto的高度过渡动画特效 | Ky's lab

使用 max-height并不是一个完美方案，因为仍然需要设定一个固定的值并没有满足"auto"的需求
使用grid布局可以满足需求，代价是需要新增一个子元素

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
   <style>
     #panel {
       display: grid;
       grid-template-rows: 0fr;
       overflow: hidden;
       transition: 0.5s;
       background-color: #4a81b9;
     }

     #panel.active {
       grid-template-rows: 1fr;
     }

     #panel > * {
       min-height: 0;
     }
   </style>
 </head>
 <body>
   <div id="btn">Click</div>
   <div id="panel">
     <div>Perfect Auto Height Transition</div>
   </div>
 </body>
 <script>
   document.getElementById('btn').addEventListener('click', () => {
     const dom = document.getElementById('panel')
     dom.classList.toggle('active')
   })
 </script>
</html>