使用 Tailwind 时过渡无法开始工作

Answer 1

CSS 转换不能发生在从

display

更改为

none

的同一帧上。您可以使用

requestAnimationFrame()

等待一个帧并调整新帧的

left

属性：

function navOpen() {
  // const Overlay = document.getElementById('overlay');
  const NavLinks = document.getElementById('nav-links');

  document.body.classList.add('h-screen', 'overflow-hidden');
  // Overlay.classList.remove('hidden');
  NavLinks.classList.remove('hidden');
  requestAnimationFrame(() => {
    NavLinks.classList.remove('left-[-100%]');
    NavLinks.classList.add('left-0');
  });
}

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="nav-links" class="fixed bg-bg-white overflow-scroll h-screen min-w-[80vw] left-[-100%] top-0 p-3 z-40 hidden transition-all duration-1000 ease-in">
</div>

<div class="flex flex-col gap-1 cursor-pointer" onclick="navOpen()">
  <div class="w-7 h-1 bg-black rounded-md"></div>
  <div class="w-8 h-1 bg-black dounded-md"></div>
  <div class="w-6 h-1 bg-black rounded-md"></div>
</div>

您可能还希望考虑使用

transform: translateX()

进行过渡，因为 它性能更高：

function navOpen() {
  // const Overlay = document.getElementById('overlay');
  const NavLinks = document.getElementById('nav-links');

  document.body.classList.add('h-screen', 'overflow-hidden');
  // Overlay.classList.remove('hidden');
  NavLinks.classList.remove('hidden');
  requestAnimationFrame(() => {
    NavLinks.classList.remove('-translate-x-full');
  });
}

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="nav-links" class="fixed bg-bg-white overflow-scroll h-screen min-w-[80vw] -translate-x-full top-0 p-3 z-40 hidden transition duration-1000 ease-in">
</div>

<div class="flex flex-col gap-1 cursor-pointer" onclick="navOpen()">
  <div class="w-7 h-1 bg-black rounded-md"></div>
  <div class="w-8 h-1 bg-black dounded-md"></div>
  <div class="w-6 h-1 bg-black rounded-md"></div>
</div>