滚动移动菜单项上的导航栏动画文本徽标

Question

我有一个独特的问题，我希望有人可以帮助解决。 这是正在发生的事情的 .gif。

正如您所看到的，当徽标动画时，它会左右移动菜单项，我尝试使用 navbar-start、navbar-center 和 navbar-end 将它们分开，以防止这种情况发生，但正如您所知，我什么也没有做。确实有效。

我需要徽标保持动画状态，而不左右移动菜单项。

我正在使用 Tailwind CSS。

这是导航栏的代码：

document.getElementById('menu-toggle').addEventListener('click', function() {
    const menu = document.querySelector('.mobile-menu');
    menu.classList.toggle('active');
});

  .mobile-menu {
    transition: all 1s ease-in-out;
  }

  .mobile-links {
    color: #ffffff;
    font-size: 1.5rem;
  }

  .mobile-links:hover {
    color: #fffb00;
    font-size: 1.5rem;
  }

  .dark .mobile-links {
    color: #dbdbdb;
    font-size: 1.5rem;
  }

  .dark .mobile-links:hover {
    color: #ffdc16;
    font-size: 1.5rem;
  }

  .menulinks {
    color: #ffffff;
    font-size: 1rem;
  }

  .menulinks:hover {
    color: #fffb00;
    font-size: 1rem;
  }

  .dark .menulinks {
    color: #d4d3d3;
    font-size: 1rem;
  }

  .dark .menulinks:hover {
    color: #ff00d4;
    font-size: 1rem;

<nav class="menux glassmorphism p-4 backdrop-blur-2xl">
      <div class="container mx-auto flex flex-wrap justify-between items-center">
        <div class="navbar-start text-3xl font-bold logo-fire" aria-labelledby="Explode Logo"><h4 data-value="EXPLODE">EXPLODE</h4></div>
            <div class="navbar-center">
              <ul class="hidden md:flex md:space-x-6">
                <li><a href="#" class="text-center transition menulinks" aria-labelledby="Home">Home</a></li>
                <li><a href="#" class="text-center transition menulinks" aria-labelledby="About">About</a></li>
                <li><a href="#" class="text-center transition menulinks" aria-labelledby="Services">Services</a></li>
                <li><a href="#" class="text-center transition menulinks" aria-labelledby="Contact">Contact</a></li>
              </ul>
            </div>
        <div class="navbar-end">
              <div class="flex items-center">
                <label aria-label="Dark Mode Toggle" class="toggle-switch">
                  <input type="checkbox" id="darkModeToggle">
                  <span class="toggle-slider">
                    <span class="toggle-icons">
                      <span class="sun-icon">☀️</span>
                      <span class="moon-icon">🌙</span>
                    </span>
                  </span>
                </label>
                <button id="menu-toggle" class="md:hidden mm-icon ml-4">
                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                  </svg>
                </button>
              </div>
          <div class="mobile-menu md:hidden mt-4">
            <ul class="space-y-2">
              <li><a href="#" class="block py-2 text-center transition mobile-links" aria-labelledby="Home">🏠 Home</a></li>
              <li><a href="#" class="block py-2 text-center transition mobile-links" aria-labelledby="About">💎 About</a></li>
              <li><a href="#" class="block py-2 text-center transition mobile-links" aria-labelledby="Services">🎹 Services</a></li>
              <li><a href="#" class="block py-2 text-center transition mobile-links" aria-labelledby="Contact">🌎 Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>

提前致谢。

Answer 1

尝试为具有

aria-labelledby="Explode Logo"

的徽标容器设置固定宽度。如果没有固定宽度，则将动态宽度设置为自动，这可能会导致其旁边的其他元素调整其宽度以适应整个导航栏，从而导致布局发生变化。

• 提供更多触发动画并针对徽标容器的 CSS 会很有帮助