网页下拉动画抖动

Question

所以，我正在尝试为列表制作一个下拉动画，该动画在悬停时激活，并且它基本上按照我想要的方式工作。我使用 GSAP 来使其工作，首先设置高度，以便只能看到标题，然后在悬停时增加列表的高度，同时将其向下移动相同的量，但无论我移动多少尝试调整值，仍然存在抖动，有没有办法使用 GSAP 正确执行此操作，或者我需要使用其他东西吗？

let languagesDropdown = document.querySelector(".languages-dropdown")
let languageList = document.querySelector(".language-list")

gsap.set(languagesDropdown, {
  y: -250
})

languagesDropdown.addEventListener("mouseenter", () => {
  gsap.to(languagesDropdown, {
    ease: "power1.inOut",
    duration: 0.2,
    y: -92,
    maxHeight: "375px",
  });
});

languagesDropdown.addEventListener("mouseleave", () => {
  gsap.to(languagesDropdown, {
    ease: "power1.inOut",
    duration: 0.2,
    y: -250,
    maxHeight: 59,
  });
});

.languages-dropdown {
  position: absolute;
  padding: 17px;
  border: none;
  border-radius: 10px;
  background-color: rgb(53, 53, 53);
  height: 375px;
  width: 230px;
}

.title {
  text-align: center;
  font-size: 20px;
}

.language-list {
  margin-left: 60px;
}

.hidden {
  overflow: hidden;
  max-height: 59px;
}

.language {
  display: block;
  text-decoration: none;
  padding: 5px;
  font-size: 17px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<div class="languages-dropdown hidden">
  <p class="title">Języki programowania</p>
  <div class="language-list">
    <br>
    <a href="subpages/sub-page0.html" class="language">Javascript</a>
    <a href="subpages/sub-page1.html" class="language">B</a>
    <a href="subpages/sub-page2.html" class="language">C</a>
    <a href="subpages/sub-page3.html" class="language">C++</a>
    <a href="subpages/sub-page4.html" class="language">C#</a>
    <a href="subpages/sub-page5.html" class="language">Rust</a>
    <a href="subpages/sub-page6.html" class="language">Java</a>
    <a href="subpages/sub-page7.html" class="language">Python</a>
    <a href="subpages/sub-page8.html" class="language">Golang</a>
    <a href="subpages/sub-page9.html" class="language">PHP</a>
  </div>
</div>

我尝试调整列表向上移动的量，但它要么在动画完成后改变了高度，要么在动画过程中抖动

Answer 1

事实证明，它在展开时向上移动的唯一原因是因为我在容器中有“align-items: center”，删除它后，我设法用几行 CSS 来使动画工作，而不需要 JavaScript。

.languages-dropdown {
    padding: 17px;
    overflow: hidden;
    border: none;
    border-radius: 10px;
    background-color: rgb(53, 53, 53);
    height: 59px;
    width: 230px;
    transition: height 0.3s ease-in-out;
    margin-top: 200px;
}

.languages-dropdown:hover {
    height: 370px;
}

.title {
    text-align: center;
    font-size: 20px;
}

.language {
    display: block;
    padding: 5px;
    font-size: 17px;
    margin-left: 60px;
}

<div class="languages-dropdown">
      <p class="title">Języki programowania</p>
      <br>
      <a href="subpages/sub-page0.html" class="language">Javascript</a>
      <a href="subpages/sub-page1.html" class="language">B</a>
      <a href="subpages/sub-page2.html" class="language">C</a>
      <a href="subpages/sub-page3.html" class="language">C++</a>
      <a href="subpages/sub-page4.html" class="language">C#</a>
      <a href="subpages/sub-page5.html" class="language">Rust</a>
      <a href="subpages/sub-page6.html" class="language">Java</a>
      <a href="subpages/sub-page7.html" class="language">Python</a>
      <a href="subpages/sub-page8.html" class="language">Golang</a>
      <a href="subpages/sub-page9.html" class="language">PHP</a
</div>