tailwindcss 中的导航栏转换

Posted 2023-03-06

【中文标题】tailwindcss 中的导航栏转换

【英文标题】：Navbar transition in tailwindcss

【发布时间】：2021-04-25 23:25:19

【问题描述】：

我有一个导航栏，我希望当有人点击该按钮时，它会在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 代码，它不起作用。

【参考方案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>

【参考方案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;
  

效果如下：

不需要规模，效果可能不如预期。