制作数据框伸缩动画

<div
            class="LessonPreparation__Center__Top__List scale-up-ver-top"
            :class="{ LongShow: ChapterListShow }"
            v-show="ChapterListShow"
          >
            <div
              class="LessonPreparation__Center__Top__List__Item"
              :class="
                chapterListData.id == item.id
                  ? 'LessonPreparation__Center__Top__List__ItemActive'
                  : ''
              "
              v-for="(item, index) in TeacherList"
              :key="index"
              @click="SectionListClick(item)"
            >
              {{ item.label }}
            </div>
          </div>
//主要标签scale-up-ver-top
//状态控制 ChapterListShow   的标签  LongShow

   .LessonPreparation__Center__Top__List {
        position: absolute;
        width: 240px;
        height: 265px;
        top: 33%;
        left: 1%;
        z-index: 2;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0px 0px 12px 0px rgba(7, 22, 37, 0.16);
        padding: 10px 8px;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* 在支持的设备上启用平滑滚动 */
        /* 隐藏滚动条 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */

        // 动画部分
        -webkit-animation: scale-up-ver-top 0.3s ease;
        animation: scale-up-ver-top 0.3s ease;
        -webkit-transform-origin: top;
        transform-origin: top;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);

        /* 隐藏 WebKit 浏览器的滚动条 */
        &::-webkit-scrollbar {
          display: none;
        }

        .LessonPreparation__Center__Top__List__Item {
          padding: 8px 0 7px 22px;
          color: #000;
          font-family: 'PingFang SC';
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          &:hover {
            background: #ebf1fc;
          }
        }
        .LessonPreparation__Center__Top__List__ItemActive {
          color: var(--Blue-1, #2f80ed);
        }
      }
      .LongShow {
        /* 展开状态 */
        // max-height: 180px; /* 根据实际内容的最大高度调整 */
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }

      @-webkit-keyframes scale-up-ver-top {
        0% {
          -webkit-transform: scaleY(0.4);
          transform: scaleY(0.4);
          -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
        }

        100% {
          -webkit-transform: scaleY(1);
          transform: scaleY(1);
          -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
        }
      }

      @keyframes scale-up-ver-top {
        0% {
          -webkit-transform: scaleY(0.4);
          transform: scaleY(0.4);
          -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
        }

        100% {
          -webkit-transform: scaleY(1);
          transform: scaleY(1);
          -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
        }
      }