html+css+js实现高度过渡效果

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <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>

html+css+js实现高度过渡效果_第1张图片

你可能感兴趣的:(javascript,html,css)