滑动移动菜单过渡效果

Question

我目前正在尝试让我的 web 页面响应更快一些。 现在在移动分辨率下，我的汉堡图标在右上角，单击它时，导航栏下方会显示一个菜单。 然而，它立即出现。 我想让过渡更平滑一点，以便 div（他的显示由 javascript 从无切换到 flex）以一种很好的方式从顶部滑动。 我正在使用 Tailwind 框架。

HTML相关代码在这里：

    <!-- Mobile menu -->
<div class="hidden mobile-menu w-screen h-screen uppercase max-w-full">
  <ul class="h-4/6 py-24 flex flex-col items-center justify-evenly text-xl">
    <li class="mobile-menu-link"><a href="./index.html#omne" class="px-2 py-4">O mně</a></li>
    <li class="mobile-menu-link"><a href="./index.html#cenik" class="px-2 py-4">Ceník</a></li>
    <li class="mobile-menu-link"><a href="./index.html#faq" class="px-2 py-4">FAQ</a></li>
    <li class="mobile-menu-link"><a href="./index.html#contact" class="px-2 py-4">Kontakt</a></li>
   </ul>
</div>

这里是 Javascript：

/* MOBILE MENU NAVBAR */
// find HTML elements only after DOM loaded!!!! if DOM did't load you can't find it
window.addEventListener('DOMContentLoaded', (event) => {
// Grab HTML Elements
const btn = document.querySelector(".mobile-menu-button");
const menu = document.querySelector(".mobile-menu");
const links = document.querySelectorAll(".mobile-menu-link")

// Add Event Listeners
  btn.addEventListener("click", () => {
    menu.classList.toggle("hidden");
    });
  links.forEach((link) => {
    link.addEventListener("click", () => {
      menu.classList.toggle("hidden");
    });
  });
});
/* END OF MOBILE MENU NAVBAR */

我尝试将主 div 的过渡设置为某些值，但什么也没发生，我觉得过渡功能仅适用于某些元素？ 我不太了解转换功能，因为有时它会发生在：hover 有时会发生一些不同的动作。 这对我来说真的很困惑。 非常感谢任何帮助。

PS：您也可以在这里查看页面的当前state。

提前致谢

Answer 1

您应该使用带有transition的transform并在 Y 轴上移动元素（从顶部输入）。 简化示例：

.mobile-menu {
  transform: translateY(0);
  transition: transform 0.3s linear;
}

.mobile-menu.hidden {
  transform: translateY(-100%);
}

此外，如果您拥有它们，请移除.mobile-menu元素的display或visibility更改，因为这些更改无法使用transition进行动画处理。