自适应高度的过渡

点击查看代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 300px;
        margin: auto;
        overflow: hidden;
        background-color: palegreen;
        transition: 0.3s;
      }
      .box-item {
        line-height: 40px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <button class="operate-button">折叠</button>
    <button class="add-button">追加</button>
    <div class="box">
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
    </div>

    <script>
      let operateButton = document.querySelector(".operate-button");
      let addButton = document.querySelector(".add-button");
      let box = document.querySelector(".box");
      let tag = false;
      //   监听过渡执行完毕
      box.addEventListener("transitionend", () => {
        console.log(tag);
        if (!tag) {
          box.style.removeProperty("height");
        }
      });
      operateButton.addEventListener("click", () => {
        if (tag) {
          box.style.height = "auto";
          const height = box.offsetHeight;
          box.style.height = 0;
          //下次重绘（下一帧）执行
          requestAnimationFrame(() => {
            box.style.height = height + "px";
          });
          operateButton.textContent = "折叠";
        } else {
          const height = box.offsetHeight;
          box.style.height = height + "px";
           //下次（下一帧）重绘执行
          requestAnimationFrame(() => {
            box.style.height = 0;
          });
          operateButton.textContent = "展开";
        }
        tag = !tag;
      });

      addButton.addEventListener("click", () => {
        const cloneLiItem = document.querySelector(".box-item").cloneNode(true);
        box.appendChild(cloneLiItem);
      });
    </script>
  </body>
</html>
posted @ 2024-01-24 17:30  jialiangzai  阅读(11)  评论(0)    收藏  举报