滑动移动菜单过渡效果

Question

我目前正在尝试让我的网页更具响应性。现在在移动分辨率下，我的汉堡包图标位于右上角，单击它时，导航栏下方会显示一个菜单。然而它立即出现。我想让过渡更平滑一些，以便 div（他的显示由 javascript 从 none 切换到 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: 也可以查看页面的当前状态here.

提前致谢

Answer 1

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

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

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

此外，如果您有它们，请删除对 .mobile-menu 元素的 display 或 visibility 更改，因为这些无法使用 transition 设置动画。

滑动移动菜单过渡效果

Sliding mobile menu transition effect

html

javascript

css

navbar

css-transitions