translateX 移除 html 元素的高度答案

【问题标题】：translateX removes height of html elementtranslateX 移除 html 元素的高度
【发布时间】：2022-08-02 16:29:04
【问题描述】：

我正在使用一种 Tailwinds 管理页面布局，并试图在移动设备上为侧边栏菜单的打开和关闭设置动画。我正在尝试使用库anime.js 来做到这一点。

每当我关闭菜单时，元素的高度都会发生变化，并且链接会在随后的打开中消失。有关详细信息，请参阅此小提琴：https://jsfiddle.net/yr4L0u37/。

我尝试设置最小高度（min-h-screen），将位置更改为fixed 和absolute，但问题仍然存在。知道为什么会发生这种情况以及如何解决吗？不使用动画库（或不同的）的答案也很好。

这是animejs动画的代码。

$(function () {
    $(\'#mobile-nav-open\').on(\'click\', function () {
    anime({
        targets: \'#mobile-nav\',
      translateX: () => [\"-100%\", \"0\"],
      duration: 1200,
      easing: \'easeInOutQuart\'
    });
  });
  
  $(\'#mobile-nav-close\').on(\'click\', function  () {
    anime({
        targets: \'#mobile-nav\',
      translateX: () => [\"0\", \"-100%\"],
      duration: 1200,
      easing: \'easeInOutQuart\'
    });
  });
});

这是移动菜单的 HTML。

<div class=\"relative z-40\" role=\"dialog\" aria-modal=\"true\" id=\"mobile-nav\">
   <div class=\"fixed inset-0 bg-gray-600 bg-opacity-75\"></div>
   <div class=\"fixed inset-0 flex z-40\">
      <div class=\"relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white\">
         <div class=\"absolute top-0 right-0 -mr-12 pt-2\">
            <button id=\"mobile-nav-close\" type=\"button\" class=\"ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white\">
               <span class=\"sr-only\">Close sidebar</span>
               <svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">
                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />
               </svg>
            </button>
         </div>
         <div class=\"flex-shrink-0 flex items-center px-4\">
            <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/workflow-logo-indigo-600-mark-gray-800-text.svg\" alt=\"Workflow\">
         </div>
         <div class=\"mt-5 flex-1 h-0 overflow-y-auto\">
            <nav class=\"px-2 space-y-1\">
               <a href=\"#\" class=\"bg-gray-100 text-gray-900 group flex items-center px-2 py-2 text-base font-medium rounded-md\">
                  <svg class=\"text-gray-500 mr-4 flex-shrink-0 h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">
                     <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\" />
                  </svg>
                  Dashboard
               </a>
               ... more links
            </nav>
         </div>
      </div>
      <div class=\"flex-shrink-0 w-14\" aria-hidden=\"true\">
      </div>
   </div>
</div>

标签： javascript html tailwind-css anime.js

【解决方案1】：

我猜你想关闭整个菜单面板，对吧？也许你把 id 标签放在错误的层
https://jsfiddle.net/CrptoMike/d1Lc04a6/2/

<div class="relative z-40" role="dialog" aria-modal="true">
 <div class="fixed inset-0 bg-gray-600 bg-opacity-75"></div>
  <div class="fixed inset-0 flex z-40" id="mobile-nav">
...

【讨论】：