tailwindcss 中的导航栏过渡

Question

我有一个导航栏，我希望当有人点击该按钮时，它会在 tailwindcss 中以 transition 打开。

const bar_btn = document.getElementById('BAR-BTN');
const mobileMenu = document.getElementById('mobileMenu')
bar_btn.addEventListener(
 'click',
  function() {
    mobileMenu.classList.toggle('w-0')
    mobileMenu.classList.toggle('h-0')
  }
)

<nav>
  <div>
    <button id='BAR-BTN'><i class="fas fa-bars fa-2x"></i></button>
  </div>
  <ul class="transition-transform ease-linear h-0 w-0 delay-1000 duration-1000"
    id="mobileMenu">
    <li>test-1</li>
    <li>test-2</li>
    <li>test-3</li>
  </ul>
</nav>

这是我的 HTML 和 javascript 代码，但它不起作用。

Answer 1

我找不到一种方法来过渡到高度属性（我们可以纯 css）所以我使用比例来提供过渡效果

看看有没有帮助

  const bar_btn = document.getElementById('BAR_BTN');
  const mobileMenu = document.getElementById('mobileMenu')

  bar_btn.addEventListener('click',function()
   {
          mobileMenu.classList.toggle('transform');

      }
  );

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<nav>
  <div>
    <button id="BAR_BTN" class="px-10 py-2 mt-10 mx-10 w-1/4 hover:bg-green-300 bg-green-200 transition-all">button</button>
  </div>
  <ul id="mobileMenu" class="mx-10 p-5 border-4 border-black overflow-hidden text-xl w-1/4 origin-top  duration-300 scale-y-0" >
    <li>Test-1</li>
    <li>Test-2</li>
    <li>Test-3</li>
  </ul>
</nav>

Answer 2

我刚才遇到同样的问题，我解决了。

// .tsx


navigationRef.current?.classList.toggle('active');

<div ref={navigationRef} className=' w-[80px] ... duration-500 transition-all ' />

// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .active {
    width: 300px !important;
  }
}

效果如下：

不需要缩放，效果可能不如预期。

tailwindcss 中的导航栏过渡

Navbar transition in tailwindcss

html

css

navbar

css-transitions

tailwind-css