html+css+js实现高度过渡效果_网页制作用js实现0到atuo高度过渡-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46219714/article/details/133611558

<!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>
      .container {
        position: relative;
      }
      .nav {
        width: fit-content;
        padding: 5px 10px;
        border-radius: 5px;
        background-color: orange;
        color: white;
        cursor: pointer;
      }
      .nav:hover {
        background-color: orangered;
      }
      .nav:hover ~ .content {
        height: var(--height--);
      }
      .content {
        position: absolute;
        top: 40px;
        width: 200px;
        height: 0;
        overflow: hidden;
        background-color: skyblue;
        transition: all 0.5s;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="nav">下拉</div>
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto praesentium sunt ea alias at
        cumque nostrum impedit eveniet, excepturi aliquid nesciunt ut. Nobis placeat excepturi
        sapiente, dolorem quia perferendis aspernatur? Veniam asperiores illo qui optio rem
      </div>
    </div>
    <script>
      const el = document.querySelector('.content'),
        height = el.scrollHeight;
      el.style.setProperty('--height--', height + 'px');
    </script>
  </body>
</html>