Tailwind框架下实现移动端滑动菜单平滑滑入过渡效果的问题求助

核心问题原因 #

CSS transition 仅支持存在连续中间态的属性（如位移、透明度、宽高等），而display属于离散属性，只有none和非none两个跳转状态，没有过渡中间帧，所以直接切换hidden类（本质是切换display: none）时过渡效果不会生效。

具体修改方案 #

1. 修改移动端菜单HTML的类属性 #

放弃用hidden控制显隐，改用位移、透明度、可点击状态组合控制，同时添加过渡属性：

<!-- Mobile menu -->
<div class="mobile-menu fixed top-0 left-0 w-screen h-screen uppercase max-w-full -translate-y-full opacity-0 pointer-events-none transition-all duration-300 ease-in-out z-50">
  <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>

新增/调整的类说明：

• fixed top-0 left-0 z-50：固定菜单在视口顶部，层级足够高避免被其他元素遮挡
• -translate-y-full：初始状态下菜单完全偏移到视口顶部外，不可见
• opacity-0：初始透明度为0，配合位移实现更自然的过渡
• pointer-events-none：隐藏状态下阻止菜单接收点击事件，避免看不见还误触发
• transition-all duration-300 ease-in-out：所有属性变化都应用300ms的缓动过渡

2. 修改JS交互逻辑 #

不需要新增自定义CSS类，直接切换内置类即可实现效果，修改后代码如下：

/* MOBILE MENU NAVBAR */
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('-translate-y-full');
    menu.classList.toggle('opacity-0');
    menu.classList.toggle('pointer-events-none');
    });
  links.forEach((link) => {
    link.addEventListener("click", () => {
      menu.classList.add('-translate-y-full');
      menu.classList.add('opacity-0');
      menu.classList.add('pointer-events-none');
    });
  });
});
/* END OF MOBILE MENU NAVBAR */

注意点击链接关闭菜单时用add而不是toggle，避免出现点链接反而打开菜单的逻辑异常。

内容的提问来源于stack exchange，提问作者Mockaj