CSS实现从下至上弹出的抽屉动画

news2025/1/11 23:42:09

从下至上展开抽屉动画

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title></title>
  <style>
    .container {
      margin: auto;
      top: 460px;
      width: 320px;
      height: 30px;
      position: relative;
      background-color: rgba(0, 0, 0, 0.4);
      overflow-y: auto;
      scroll-behavior: smooth;
      border-radius: 20px;
    }

    /* 隐藏滚动条 */
    ::-webkit-scrollbar {
      display: none;
    }

    .expend {
      animation: expend ease 1s forwards;
    }

    .close-container {
      animation: no-expend ease 1s forwards;
    }

    @keyframes expend {
      from {
        top: 460px;
        height: 30px;
      }

      to {
        height: 330px;
        top: 160px;
      }
    }

    @keyframes no-expend {
      from {
        height: 330px;
        top: 160px;
      }

      to {
        top: 460px;
        height: 30px;
      }
    }

    .close {
      color: aliceblue;
      right: 0;
      margin: 5px 10px;
      position: absolute;
    }

    .title {
      color: aliceblue;
      height: 30px;
      line-height: 30px;
      margin: 0 10px;
      position: absolute;
    }

    .list {
      display: flex;
      /* 子元素换行 */
      flex-wrap: wrap;
      white-space: nowrap;
      padding-top: 24px;
    }

    .item {
      width: 80px;
      height: 80px;
      margin: 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

    .item-img {
      width: 40px;
      height: 40px;
    }
  </style>
</head>

<body>

  <div class='container' id='container'>
    <div class='title'>抽屉标题</div>
    <div class='close' onclick='closeHandle()'>↑</div>
    <div class='list'>
      <div class='item'>
        <img src="./Icon_template.png" class="item-img">
        <span class='item-text'>内容1</span>
      </div>
      <div class='item'>
        <img src="./Icon_template.png" class="item-img">
        <span class='item-text'>内容2</span>
      </div>
      <div class='item'>
        <img src="./Icon_template.png" class="item-img">
        <span class='item-text'>内容3</span>
      </div>
      <div class='item'>
        <img src="./Icon_template.png" class="item-img">
        <span class='item-text'>内容4</span>
      </div>
      <div class='item'>
        <img src="./Icon_template.png" class="item-img">
        <span class='item-text'>内容4</span>
      </div>
    </div>
  </div>

  <script>
    const closeHandle = () => {
      console.log('关闭和展开');
      const dom = document.getElementById('container');
      const closeDom = document.getElementsByClassName('close')[0];
      if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
        dom.className = "container expend";
        setTimeout(() => {
          closeDom.innerText = 'X'
        }, 100)
      } else {
        dom.className = "container close-container";
        setTimeout(() => {
          closeDom.innerText = '↑'
        }, 100)
      }
    }
  </script>
</body>

</html>